How to adjust spacing in custom liquid for product price?

[nijntjelover]

How do i add more space between product price and the custom liquid? Also how do I remove double spacing from custom liquid? I want the custom liquid to be single spacing, and beteween the price and the custom liquid needs and extra space.

url: bundo.nl

[Justin-Simesy · Accepted solution]

Please try to replace these code with my code below

<div class="usp-list">
   <div class="page-width">
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/IDEAL_Logo.png?v=1701683033?v=1697221984" width="20"> &nbsp;Betaal veilig met iDeal &amp; Bancontact </p>
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/Zandloper_icon_fb3e2e53-8588-49d1-a342-28cca3fef585.png?v=1697222231" width="20"> &nbsp;Voor 23:59 besteld - morgen verzonden </p>
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/retourgarantie.png?v=1697222408" width="20"> &nbsp;30 Dagen Retourgarantie</p>
   </div>
</div>
<style>
   .usp-list { margin-top: 32px; margin-bottom: 16px; }
   .usp-list p.usp-item { margin-top: 0; margin-bottom: 16px; }
</style>

[Justin-Simesy]

Hi @nijntjelover. Hope you are doing well. Is that something you want to achieve ?

[nijntjelover]

Hi justin, So those 3 lines, I want them closer to each other, seee how they're double spaced?

[Justin-Simesy]

Yes. I can see it. Could you share your custom liquid code here ? I'll modify it then send it back.

Thanks,

Justin

[nijntjelover]

<style>
.custom-padding {
margin-top: 40px; /* Adjust the value as needed for the desired space */
}
</style>

{% assign empty_space = " " %}
<div class="custom-padding">
{{ empty_space }}
</div>

<!-- Your existing Liquid code goes here -->

</style><div class="list"><div class="page-width"><div style="text-align: left;"><p id="usp"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/IDEAL_Logo.png?v=1701683033?v=1697221984" width="20"> &nbsp;Betaal veilig met iDeal & Bancontact </p></p><p id="usp"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/Zandloper_icon_fb3e2e53-8588-49d1-a342-28cca3..." width="20"> &nbsp;Voor 23:59 besteld - morgen verzonden </p><p id="usp"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/retourgarantie.png?v=1697222408" width="20"> &nbsp;30 Dagen Retourgarantie</p></div></div></div>

<style>
.custom-padding {
margin-top: 40px; /* Adjust the value as needed for the desired space */
}
</style>

{% assign empty_space = " " %}
<div class="custom-padding">
{{ empty_space }}
</div>

[Justin-Simesy · Accepted solution]

Please try to replace these code with my code below

<div class="usp-list">
   <div class="page-width">
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/IDEAL_Logo.png?v=1701683033?v=1697221984" width="20"> &nbsp;Betaal veilig met iDeal &amp; Bancontact </p>
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/Zandloper_icon_fb3e2e53-8588-49d1-a342-28cca3fef585.png?v=1697222231" width="20"> &nbsp;Voor 23:59 besteld - morgen verzonden </p>
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/retourgarantie.png?v=1697222408" width="20"> &nbsp;30 Dagen Retourgarantie</p>
   </div>
</div>
<style>
   .usp-list { margin-top: 32px; margin-bottom: 16px; }
   .usp-list p.usp-item { margin-top: 0; margin-bottom: 16px; }
</style>

[nijntjelover]

Can you edit the code so its aligned to the left side more? 

[Justin-Simesy · Accepted solution]

Sure. Please try using this code

<div class="usp-list">
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/IDEAL_Logo.png?v=1701683033?v=1697221984" width="20"> &nbsp;Betaal veilig met iDeal &amp; Bancontact </p>
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/Zandloper_icon_fb3e2e53-8588-49d1-a342-28cca3fef585.png?v=1697222231" width="20"> &nbsp;Voor 23:59 besteld - morgen verzonden </p>
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/retourgarantie.png?v=1697222408" width="20"> &nbsp;30 Dagen Retourgarantie</p>
</div>
<style>
   .usp-list { margin-top: 32px; margin-bottom: 16px; }
   .usp-list p.usp-item { margin-top: 0; margin-bottom: 16px; }
</style>

[nijntjelover]

yessirrr i changed a couple numbers around but worked perfectly!!