Dawn Theme/ remove the gap above the footer

Store Design
,

Topic summary

A user is experiencing unwanted spacing above the footer on their Dawn theme Shopify store (andrejewelry.com). Despite setting the top margin to 0 in the theme editor, the gap persists on both desktop and mobile views.

Initial Solution (Desktop):

  • A community member provided CSS code to add to the base.css file:
footer {
  margin-top: 0px !important;
}
  • This successfully removed the gap on desktop/PC.

Mobile Issue:

  • The gap remained on mobile devices despite the desktop fix.
  • Additional media query CSS was suggested for mobile:
@media only screen and (max-width:749px){
  .footer {
    margin-top: 0px !important;
  }
}

Current Status:
The mobile-specific solution did not resolve the issue. The discussion remains open with the user still seeking a working fix for the mobile gap.

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

Hi there,

My url: andrejewelry.com

Password: Thankyouverymuch121

I adjusted the top margin to 0. It seems ok in the editor but on the pc and mobile website these is still gap. Please check photos below:

[In editor]

Screenshot 2023-11-23 at 1.38.55 PM.png
Screenshot 2023-11-23 at 1.38.55 PM.png2650Ă—1394 606 KB

On pc/mobile website:

Screenshot 2023-11-23 at 1.34.24 PM.png
Screenshot 2023-11-23 at 1.34.24 PM.png2682Ă—1480 869 KB

IMG_8987.jpg
IMG_8987.jpg1179Ă—2556 213 KB

How can I fix it? Thank you!

1 Like
2

Hi @AndreaHuang

  • 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, 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:
.footer {
    margin-top: 0px !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

It works! Thanks!!

4

@Made4uo-Ribe

Sorry I just checked again. It works on PC but not on mobile. There is still gap on mobile.

Thanks!

5

Oh, I check that one last night. Add this code in te base.css. Thanks!

@media only screen and (max-width:749px){
.footer {
    margin-top: 0px !important;
}
}

And Save,

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

This one doesn’t work ><

Thank you so much for you patient!