Liquid, JavaScript, themes, sales channels
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.
User | RANK |
---|---|
33 | |
27 | |
19 | |
9 | |
9 |
We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023