How to add spacing between custom lines on product page

[NinoB97]

Hi guys how do i add spacing between the lines shown on the image below? They are currently to close to each other and i want some spacing/room inbetween them!

https://auraliving.nl/products/flame-aroma-diffuser-deluxe-1

 

[BSSCommerce-HDL · Accepted solution]

Hi @NinoB97, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
  @media only screen and (max-width: 767px) {
    fieldset.js.product-form__input.product-form__input--swatch {
       margin-bottom: 30px !important;
    }
    
    product-form.product-form {
       margin-top: 35px !important;
    }
  }
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[NinoB97]

works 100%

[theycallmemakka]

Hi @NinoB97 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.product-form__input--swatch {
    margin-bottom: 2rem!important;
}

product-form.product-form {
    margin-top: 3rem!important;
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[BSSCommerce-B2B]

Hi @NinoB97 , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 768px) {
    .product-form__input {
       margin: 0 0 3rem !important;
    }
    .product__info-wrapper.grid__item.scroll-trigger.animate--slide-in product-form {
       margin-top: 4rem !important;
    }
}

In this step, You can change the value of margin/ margin-top as you want.

*Note: You need to select the correct class, starting from the parent class and moving to the child class, to avoid affecting other classes with the same name, such as "product-form".

Step 3: Save your code and reload this page.

The result will be: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!