How can I fix my website's footer to stay at the bottom of the page?

[ArnaudB]

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!!

[LitCommerce]

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!

[ArnaudB]

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!

[LitCommerce · 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!

[ArnaudB]

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

[LitCommerce]

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.

[ArnaudB]

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.

[LitCommerce]

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.  

[krizza12]

Try this too 

body{
flex-direction: column;
height: 100%;
max-height: 100%;
}
main{
flex: 1;
}
footer{
margin-top:auto;
}