How can I make the spacing equal for an element on the product page?

Store Design
, , ,

Topic summary

A user seeks help adjusting spacing around a “stitch count text block” on their product page. The element currently has unequal spacing—less margin between it and the size selector above, and more margin between it and the description below.

Solution provided:

  • Add custom CSS to the base.css file in the theme code editor
  • The CSS targets .product-info-wrapper .product-info-container .product__description and sets margin: 1rem 0;

Technical details:

  • Theme: Dawn 2.0 (free)
  • Platform: Shopify
  • A preview link and screenshot were shared to illustrate the issue

Outcome:
The solution was successfully implemented, with the original poster confirming it resolved the spacing problem.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hey,

Can you please help me in making the spacing of the stitch count text block equal between the size variant block and the description block on the product page?

Elaborating on it, at the moment the padding and margin between the stitch count text and size selector is less, whereas the padding and margin between the stitch count text and the description is more. I want it to be equally spaced between both of them.

I am using the free Dawn 2.0 theme on Shopify. If you need the base.css file or the theme.liquid file, please let me know.

Here is the website preview link: https://p31wswbe0nr3mp1x-58147176561.shopifypreview.com/products_preview?preview_key=ad92968b60c6c86…

Thanks a lot!

Screenshot 2024-07-08 at 3.47.34 PM.png
Screenshot 2024-07-08 at 3.47.34 PM.png2330Ă—1404 392 KB

2

@oscprofessional can you please help me with it here?

3

Hello @shaanrevery

Go to online store > Edit theme code > base.css > Insert the code at the bottom of this file “base.css” .

body .product__info-wrapper .product__info-container .product__description {
    margin: 1rem 0;
}
1 Like
4

Thanks a lot. You’re a lifesaver!