How to reduce the section breaks on my Home Page?

Store Design
,

Topic summary

A user seeks to reduce large spacing between sections on their Shopify store homepage. Multiple solutions are offered:

Recommended approaches:

  • Check if the theme has built-in spacing configuration options before modifying code
  • Add custom CSS to the base.css file targeting .section margins with media queries for screens wider than 45em
  • Insert CSS code in the theme.liquid file before the closing </head> tag

Technical details:
Suggested CSS reduces margin values from the default var(--space-outer) to smaller fixed values (30px or 5rem) or a fraction of the original spacing variable. All solutions use @media (min-width: 45em) to apply changes only on larger screens.

One respondent includes a screenshot demonstrating code placement. The discussion remains open with no confirmation from the original poster about which solution worked.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

https://j3bqgp-st.myshopify.com/?pb=0

As you can see the breaks between each section are pretty large. How can I reduce them?

2

Hi @Youngerme

I think your theme support configure the space outer. You should find it before do the code override.

If you want to do the code override, you can use this css code:

media (min-width: 45em) {
    .section {
        margin: 30px;
    }
}
3

Hi @Youngerme

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

Use our Big Bulk Discount app to boost your sales!(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

4

Hello @Youngerme ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media (min-width: 45em) {
    .section {
        margin: calc(var(--space-outer) * 1) 0 !important;
    }
}

Or

@media (min-width: 45em) {
   .section {
    margin:5rem 0 !important;
}
}

ZestardTech_0-1745843706209.png
ZestardTech_0-1745843706209.png1074×818 307 KB

Let me know if you need further assistance!