Unwanted gap between header and featured product

Store Design
, , , ,

Topic summary

A user encountered an unwanted green gap appearing between their Shopify store’s header and featured product section. Despite adjusting layout settings and trying various code snippets, the issue persisted.

Root Cause Identified:
Another user diagnosed that CSS code in theme.liquid or header.liquid was adding a 24px bottom margin to .section-header on screens wider than 750px.

Solutions Proposed:

  • Remove the problematic margin code if located
  • Add override CSS to base.css using margin-bottom: 0 !important with appropriate media queries

Multiple users provided similar CSS fixes targeting the .section-header element at different breakpoints (750px, 768px).

Resolution:
The original poster confirmed one of the CSS solutions worked perfectly, successfully eliminating the unwanted gap.

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

Hey everyone,

Ive got this unwatned gap between my header and feature product.

I’ve tried all the layout settings but hasn’t changed anything and ive tried a few codes i’ve found on here but nothing works.

It’s the small green section I’m trying to get rid of!

https://1xes1x-bj.myshopify.com/

Thank you!

2 Likes
2

You added this code somewhere in theme.liquid or header.liquid file, which caused the issue.

@media screen and (min-width: 750px) {
    .section-header {
        margin-bottom: 24px;
    }
}

Please remove this code. If you cannot find and remove it, please add this code to your theme.liquid file
3

Hi @Sammy113 ,

Go to Online Store > Themes > Actions > Edit Code > base.css

Add below code at the bottom of base.css file

@media screen and (min-width: 750px) {
  body .shopify-section-group-header-group.section-header {
    margin-bottom: 0 !important;
  }
}
4

Hi @Sammy113

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

@media (min-width: 768px) {
    html .section-header {
        margin-bottom: 0 !important;
    }
}

Best,

Liz

1 Like
5

Thank you so much!! This worked perfectly!