Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi there,
The footer of my website (FLEX theme) is not set to the bottom of the page. It is not noticeable on small screens or on pages with a lot of content, but on pages with less content (e.g. https://baiushki.com/account/login or on the product pages) and with a large screen, the footer ends up in the middle of the page. How can I set the footer at the bottom of the page?
I know that this question has been asked a lot on this forum but I've tried the different solutions and it didn't work for my website. The best I could do is to block it at the bottom of the page (with the code below) but it then overlaps with the content.
#shopify-section-footer-classic {
position: fixed;
bottom: 0;
}
Any ideas how to do it for my theme? Thanks a lot in advance for your support!!
Solved! Go to the solution
This is an accepted solution.
Hi @ArnaudB,
Please change code:
body{
display: flex !important;
flex-direction: column;
min-height: 100vh;
}
#template-customers-login{
flex: 1 0 auto;
}
.footer.footer--classic{
flex-shrink: 0;
}
Hope it helps!
Hi,
Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > style.css and paste this at the bottom of the file:
body {
min-height: 100vh !important;
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
}
Hope it helps!
Hello,
Thank you very much for your help. With your line of code, the footer is indeed staying at the bottom, the only problem is that the whole content of the page (except the header) is now also align to the bottom, leaving a big white space between the header and the content of the page.
Would you know what I could adjust in your code to only target the footer?
Many thanks for your help!
This is an accepted solution.
Hi @ArnaudB,
Please change code:
body{
display: flex !important;
flex-direction: column;
min-height: 100vh;
}
#template-customers-login{
flex: 1 0 auto;
}
.footer.footer--classic{
flex-shrink: 0;
}
Hope it helps!
Hi @LitCommerce ,
Thanks for the update, I appreciate! I works well now on the customer login page.
Is there a way to apply that to the whole website, because other pages also have the same problem (e.g. product pages)? I managed to do it manually by targeting individual templates e.g. "#template-product" but maybe there is a way to just apply it to the whole website?
Thanks
Hi @ArnaudB,
I checked and your source doesn't have a main class to cover the entire main content, so it won't be possible to add code that works for all.
If possible, please send me theme source or code layout/theme.liquid file. I will guide you to add main content and change the code to work for the whole site.
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
Many thanks for your help @LitCommerce.
I marked it as solved and I am also sending you by DM the code of my theme.liquid page to see if there is a way to not have to manually specify each page templates.
Hi @ArnaudB,
Please change code: https://i.imgur.com/Vz0qqtF.png
<div id="template-{{ template | replace: '.', '-' | handle }}" data-check-for-order="true">
=>
<div id="template-{{ template | replace: '.', '-' | handle }}" class="main-content" data-check-for-order="true">
Then you change the CSS code:
body{
display: flex !important;
flex-direction: column;
min-height: 100vh;
}
.main-content{
flex: 1 0 auto;
}
.footer.footer--classic{
flex-shrink: 0;
}
Hope it is clear to you.
Try this too
body{
flex-direction: column;
height: 100%;
max-height: 100%;
}
main{
flex: 1;
}
footer{
margin-top:auto;
}
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024