Gaps in product page

[manter]

Hello. How to edit the product page to have a little gap between product variants and quantity? 

Link: https://holycup.lt/collections/indu-kolekcija/products/stikliniai-siaudeliai-wavy

Thank you!

[Made4uo-Ribe · Accepted solution]

Hi @manter 

In your base.css file it was set 0 margin. You can edit it if not let me know. 

From the admin > online store > select themes > edit code > Find the Asset folder and look for Base.css file.

Click open and find this code below. 

You can also search by line numbers. 

And add the size you like example below. 

Then Save. 

Result:

[BSS-TekLabs]

Hi @manter,

You can follow these steps to make a little gap between the quantity and the product variants

1, Open Online Store > Theme > Edit Code

2. Search and open theme.css, base.css, custom.css, or styles.css

3. Paste the code snippet below to the bottom of the file and hit save (this code only updates the display on mobile view since the larger view doesn't have the variants sit on top of the quantity)

@media (max-width: 575px) {
  .tt-product-single-info .tt-wrapper .tt-input-counter {
    margin-top: 20px;
  }
}

Here is the result

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!