Hi @kyle6661,
Please send the website link, I will check it for you
Apply my solution from the previous thread properly and footer would be “stuck” at the bottom of the page.
Hi @kyle6661 can you share your website url?
Yes, www.singoau.com
Hi Tim, I tried it again in Theme Setting→Custom Css, it not work
You need to undo Moeed’s solution for this to work.
And I do not see it applied in your store…
yes, I removed that code from theme.liquid and tried the CSS code;(
Hi @kyle6661 it caused by this code
The reason why i added the code is because I want to remove a white space, the code resolve the white space issue, but on Account/Cart pages, the footer moved up in as I can see. The code from a solution I asked earlier White space issue question link. By the way, it seems the footer is at the bottom on contact page on my screen, why yours still shows above the bottom?
Because my screen is taller then yours?
This is the code which breaks mine.
Making html or body height:auto will prevent them from stretching entire window height if content is short. Therefore – white space below.
So yes, this was a solution to avoid huge empty spaces in wrong places, but it was not the best one.
By default, the Dawn theme has divided the grid rows become 4 rows.
But in your case, you divide the rows become 5 rows. That’s why the white space appears in the header.
My suggestion. If you want to add an additional row, you can add it inside the announcement-bar-section or inside the section-header. Another way is you add more rows in the grid-template rows.
Do I need to remove the following code and add another code?
html, body { height: auto !important; }The code is to remove white space
Yes, you can remove this code. Because it forces the default layout height of Dawn theme.
height: auto !important;
And move your custom code into the section-header or announcement-bar-section.
I had paste some CSS code I can found but non of them work:(
HI namphan, the website link is www.singoau.com
Hey @kyle6661
Let’s not complicate things and remove the code which I provided you earlier and then just simply,
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </ body> tag
<style>
.shopify-section-group-footer-group {
margin-top: auto !important;
}
html, body {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
</style>
RESULT:
If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
tim, I tried again the CSS code and removed the code in theme.liquid, it still not work as you can see image2, white space larger than what it suppose to be in image3.
Is it there now? I do not see it? Have you saved theme settings?
Oh, I see you’ve implemented Moeed’s variation of my code.
Looks fine, but remember that editing theme code will prevent future theme updates.
Using Theme Settings will not.