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

Solved

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

ArnaudB
Tourist
8 0 4

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

 

Accepted Solution (1)
LitCommerce
Astronaut
2860 684 751

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 8 (8)

LitCommerce
Astronaut
2860 684 751

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
ArnaudB
Tourist
8 0 4

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
Astronaut
2860 684 751

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
ArnaudB
Tourist
8 0 4

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
Astronaut
2860 684 751

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
ArnaudB
Tourist
8 0 4

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
Astronaut
2860 684 751

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.  

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

krizza12
Visitor
1 0 0

Try this too 

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