Hi, Can someone help me to add a code to remove the space between the image banner and featured collections on Mobile for Dawn theme?
Topic summary
A user seeks help removing excess white space between an image banner and featured product collections on mobile for their Dawn theme Shopify store.
Initial Solution Attempt:
- A helper provides CSS code targeting
.featured_collectionpadding and.banner__contentmargin with-120pxtop margin - This partially reduces space but doesn’t fully resolve the issue
Root Cause Identified:
- The white space stems from large menu margins pushing down the container box
- The helper recommends removing menu margins entirely rather than using negative margins
Revised Approach:
- Updated CSS targets
@media (max-width: 749px)withmargin-top: 0 !importantandalign-items: flex-start - Helper explains that removing menu margins prevents the box from extending downward
- Suggests changing banner header background to white so the margin adjustment isn’t visible
Current Status:
- User reports the solution still doesn’t fully decrease spacing
- Additional issue: banner slides down when scrolling and doesn’t stay fixed
- Discussion remains ongoing with troubleshooting in progress
1 Like
Hi @arutze ,
Try this.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.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.
@media only screen and (max-width: 749px){
.collection.section-template--19147773804880__featured_collection-padding {
padding-top: 0px;
}
.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in {
margin-top: -120px;
}
}
Result:
I hope it help.
1 Like
Hi Ribe,
Thanks for helping! It decreases the space but not as much, see the results:
Can I make the space for more? I tried adjusting the margin top px but it didn’t help
1 Like
Its better you remove the large menus margin on top. Thats is making the white space.
@media (max-width: 767px)
.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in {
margin-top: 0px !important;
align-items: flex-start;
}
Result:
1 Like
do you think it might be because I did this? :
No its my mistake. Sorry.
@media (max-width: 749px){
.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in {
margin-top: 0px !important;
align-items: flex-start;
}
}
Please replace the code I give earlier. Thanks!
1 Like
Yes I tried to take out of that one. I’ll explain because of menus margin the box containing that one go down. So that create the space down.
As you see the box go down with -margin so it extend down.
1 Like
Are you checking the mobile version, because I wanted to fix this only in mobile?
Yes, Im only checking the mobile.
1 Like
Hi, so do In the first code you share do I remove the “margin-top: -120px” part?
I am a bit confused, If you don’t mind can you just write a whole code for me to copy and paste? thank you
Yeah, I just remove some of it not whole. But then you like to change your Banner header background to white. Then the gap from that minus margin wont be visible. So it better that you take out all the menus margin. Try the last code that give if it working.
1 Like
Hi Ribe,
To be honest it still didn’t decrease the size, also when i scroll down the banner slides down a bit, can I make it still, so it doesn’t move?