How to adjust code for reducing space gaps in theme layout?

Store Design

Topic summary

A user seeks CSS code to reduce spacing gaps in their product page layout, specifically wanting to minimize the space between certain elements to match other sections.

Solutions Provided:

Two community members offered CSS code snippets to address the spacing issue:

  • First solution: Add CSS to base.css targeting .product-form with margin-top: 0.6rem!important and .product__info-container>*+* with line-height: 10px

  • Second solution: For mobile-specific adjustments, add media query code to base.css, style.css, or theme.css targeting specific product template elements with margin-top: 0px!important and margin-bottom: 0px!important

Implementation steps: Both solutions require navigating to Online Store > Themes > Actions > Edit code > Assets folder, then adding the provided CSS code at the bottom of the appropriate stylesheet file.

The discussion includes screenshots showing the desired spacing changes and expected results. The issue remains open pending confirmation from the original poster on whether either solution resolved their layout problem.

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

Hi Please can someone give me the code to decrease the gap highlighted In red so it’s like the ones in green please

https://hothugger.com/products/cream-hot-hugger-wearable-hot-water-bottle
refresh theme

IMG_5333.jpeg
IMG_5333.jpeg1170×2532 155 KB

1 Like
2

hi @Finn4

May this help you.

1: Go to online store > themes > Actions > Edit code > ASSESTS > base.css Add this code at the
bottom.

.product-form {
    margin-top: 0.6rem!important;
}
.product__info-container>*+* {
    line-height: 10px;
}

you can see the change

SideNode_0-1695904159068.png
SideNode_0-1695904159068.png1348×605 335 KB

If I was able to assist you, please remember to give it a Like and Mark it as the Solution!

Let me know if need further assistance
Regards,
SideNode

3

Hi @Finn4

Is this for mobile only? if it is try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width:749px){
#ProductInfo-template--16805755814144__main > div:nth-child(13) {
    margin-bottom: 0px !important;
}
#ProductInfo-template--16805755814144__main > div:nth-child(15) {
     margin-top: 0px !important;
}
product-form.product-form {
    margin-top: 0px !important;
}
}