Removing white spaces between image banner Dawn theme

Store Design
, , ,

Topic summary

A user is working to eliminate white spaces appearing between image banners on their Shopify Dawn theme store.

Initial Solution:

  • A CSS code snippet was provided to target the first banner section by adding margin-top: 0px !important; to the base.css file
  • This successfully removed the space between the first and second banners, but spacing persisted between subsequent banners

Complete Fix:

  • An updated CSS rule using section.markup + section.markup selector was shared to remove all spacing between consecutive banner sections
  • The user confirmed this solution worked perfectly

Follow-up Request:

  • The user then asked how to modify the image banner button to display as simple text in the bottom left corner (referencing an uploaded image)
  • They also want to make the entire banner image clickable to navigate to a desired section

The discussion remains open as the additional customization requests have not yet been addressed.

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

Hello, I’m trying to remove white spaces between image banners as you can see from this screenshot.

Can anyone please help?

Best

Federico

Schermata 2023-07-29 alle 13.15.33.png
Schermata 2023-07-29 alle 13.15.33.png2052×1052 163 KB

1 Like
2

Hello @fred89xxx

Please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.

3

Hi @fred89xxx ,

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

4

Hello, thanks for your help, here the link for the theme I’m working on:

https://xcvo23t0mat6f7am-76195529032.shopifypreview.com

Best

Fred

5

Hello, thanks for your help, here the link:

https://xcvo23t0mat6f7am-76195529032.shopifypreview.com

Best

Fred

6

Hello @fred89xxx

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#shopify-section-template--19354997915976__1e1f59de-2bfd-450b-92db-0c84e08376a6 {
    margin-top: 0px !important;
}
7

Thanks! this really worked between the first and second image banner, but then from second to third the space still persists.

Here link for recheck:

https://xcvo23t0mat6f7am-76195529032.shopifypreview.com

Thanks!!!

8

Hello @fred89xxx

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+.section {
    margin-top: 0px !important;
}
9

Thanks working perfectly! so great!

since we already on this themes, do you know how to change the image banner button to make it appear a simple text in bottom left corner as in this reference image?

Schermata 2023-07-29 alle 16.18.44.png
Schermata 2023-07-29 alle 16.18.44.png2808×1214 891 KB

and to make all the image banner pic clickable to go in desired section

here last link updated:

https://xcvo23t0mat6f7am-76195529032.shopifypreview.com

Thanks so much!