White portion between header and slideshow section in Shopify Dawn

Topic summary

A Shopify store owner using the Dawn theme encountered an unwanted white gap appearing between the header and slideshow sections.

Initial troubleshooting:

  • User shared screenshots showing the white space issue
  • Access complications arose due to country blocker and password protection on the development site
  • After resolving access (opening site for Portugal), the helper identified the problem

Solution provided:
Add custom CSS code to the theme’s stylesheet (base.css, style.css, or theme.css):

#shopify-section-sections--[ID]__header {
  margin-bottom: 0px;
}
#shopify-section-sections--[ID]__[slideshow-ID] {
  margin-top: 0px;
}

Outcome:
The CSS fix successfully removed the white gap. The issue was resolved by zeroing out the top and bottom margins of the respective sections.

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

Hi there,

I’m using Shopify dawn. I’ve noticed a wierd white portion in between the Slideshow and Header section. Is there somebody to help me to remove that?

Thanks in advance.

@debsen

1 Like

Hi @deb007 ,

Would you mind to share your URL wesbsite? with password if its protected. Thanks!

1 Like

Hi @Made4uo-Ribe ,

Thanks for your early reply.

URL: https://www.ryalestore.com/

Password: majhipara1235$

Thanks,

@deb007

1 Like

Thank you for the information. Unfortunately, Im willing to help but I cant access it.

I try to mozzilla and incognito, no luck at all. Sorry.

Hi @Made4uo-Ribe ,

I’m extremely sorry for the inconvenience, actually country blocker is on at my site. Could you tell me from which country you are, so that I can open it for you.

Thanks,

@deb007

Hi @Ribe_Dagandara,

I 've opened the site for Portugal. You can check it now.

Thanks,

@deb007

1 Like

Thank you, check this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:

And Save.

section#shopify-section-sections--19644178727210__168562887870ffe2ea {
    margin-top: 0px;
}
div#shopify-section-sections--19644178727210__header {
    margin-bottom: 0px;
}​

Result:

I hope it help.

1 Like

Hi @Ribe_Dagandara,

It’s working. Thanks a lot. You’re a genius. :slightly_smiling_face:

Thanks,

@deb007

1 Like