DAWN THEME
Hi there,
I’ve read other questions and tried the accepted solutions for this topic, and they aren’t working for me. I want a margin at the top of my Footer, but it leaves a weird white space between the Footer and the section above it ONLY ON MOBILE and ONLY ON THE HOME PAGE. On the other pages - for example, my “About Us” page - there’s no margin and no white space. Please see these images for reference - the first image is my home page on mobile and the second image is my “About Us” page, also on mobile:
I have no experience with coding, so I’m probably doing something wrong, but I followed this particular solution, and it just removes the margin completely on the Home Page, which I don’t want:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-footer.css->paste below code at the bottom of the file:
.footer {
margin-top: 0 !important;
}
I want a margin in the Footer on every page of my mobile website without that white space. Please help! Thank you very much in advance.
This: https://community.shopify.com/post/3000060
New free themes from Shopify has body set to display:grid;. This is done so that footer is “glued” to the bottom of the window. However, this solution does not like when new children are added to the body element, the structure here must be fixed.
In your case, cookie consent app has done this.
The problem is only visible if your page has not enough content to fill entire window.
If you change the grid-template it will fix this, but if some app will change your page structure, the problem may reappear.
Go to your Theme Settings and add this to “Custom CSS” – this solution is more forgiving to document structure changes:
html body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
margin-bottom: auto;
}
This code basically means that if your page content is not tall enough to fill the window, the empty space will be added between main template sections area and footer group.
Before/after:
Thank you, Tim! However, this didn’t fix the issue 
Can’t see the code on your site. Obviously, it did fix it for me, given the screenshots?
I’m not sure why the contact form was down like that on yours - I haven’t had that issue. My issue is the white gap above the footer created when I insert a margin. Thank you.
