Remove Spacing Between Sections (Dawn 9.0.0)

Store Design
, , ,

Topic summary

A user is experiencing unwanted spacing between a banner image and featured collection section on their Shopify Dawn 9.0.0 theme, despite setting all padding and margin values to 0.

Proposed Solutions:
Multiple community members offered CSS fixes targeting the specific section ID:

  • Add negative top margin (margin-top: -20px or -22px) to the section element
  • Insert code into the base.css file at the bottom
  • Use media queries for screens wider than 750px
  • Apply !important flag to override existing styles

Implementation Steps:

  1. Navigate to Online Store → Theme → Edit code
  2. Locate the base.css file in Assets
  3. Paste the provided CSS targeting #shopify-section-template--16141722... at the bottom
  4. Save changes

All solutions follow the same approach of applying negative margin to close the gap, with minor variations in pixel values and specificity.

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

Hey,

I am unable to figure out what’s causing this spacing between my banner image and featured collection section. I have all the padding / margin setting set to 0. So, I’m not sure why this is happening.

If anyone has some code to fix this, that would be amazing!

Website: Wholesome Boy

062f7f713be44681de47796fd0b14ea7.jpg
062f7f713be44681de47796fd0b14ea7.jpg1920×439 85.4 KB

2

@WholesomeBoy add below css into base.css file

@media screen and (min-width: 750px)
{
section#shopify-section-template--16141722452138__16582996915f1a3385 {
    margin-top: -20px;
}
}

Ujjaval_0-1685701805420.png
Ujjaval_0-1685701805420.png1593×799 325 KB

1 Like
3

HI @WholesomeBoy

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

section#shopify-section-template–16141722452138__16582996915f1a3385 {

margin-top: -20px !important;

}

Hope that my solution works for you.

Best regards,

Lucas | PageFly

1 Like
4

Hello @WholesomeBoy

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.section-template--16141722452138__16582996915f1a3385-padding {
    margin-top: -22px !important;
}