- This topic has 9 replies, 3 voices, and was last updated 6 months, 3 weeks ago by
David.
-
AuthorPosts
-
June 25, 2020 at 3:11 pm #1341999
nik9
Hello,
I try to fix the footer at the page bottom on page with not much content e.g. MyAccount. I already found some cases in this forum but no code is working for me.
Id should work on every device.. the code below is for desktop…
https://generatepress.com/forums/topic/keep-the-footer-at-the-bottom-on-short-pages/
@media (min-width: 1024px) { body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; } .site-footer { margin-top: auto; } }
I use the niche template. Are there other classes?
Thanks & cheers π
June 25, 2020 at 9:04 pm #1342122Leo
StaffCustomer SupportHi there,
You shouldn’t need this code for mobile as there is generally more than enough content to cover the height of the mobile screen.
Your account page definitely has enough content so the footer is at the bottom by default.
Does that help?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 26, 2020 at 12:28 am #1342274nik9
Hi leo
Thanks. Yeah.. maybe on moblie it is enough content. But not on desktop. So I try to set the footer always at the bottom.
What do I have to do for desktop and tablet, iPad pro?
June 26, 2020 at 12:39 am #1342282David
StaffCustomer SupportHi there,
its because the Off Canvas plugin you’re using it adds a
<div>
wrapper around the entire content of the site. To use the code above you would changebody
for#ocs-site
Beware though as this may have some unexpected effects
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 26, 2020 at 5:50 am #1342503nik9
Thanks David,
So is there no easy fix for this?
Cheers
June 26, 2020 at 6:06 am #1342519David
StaffCustomer SupportYou can apply it just to the accounts page.
Use this for the CSS selector:body.page-id-2669 #ocs-site
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 26, 2020 at 7:41 am #1342623nik9
Thanks David π
It work. but then I have problems with the Navigation in MyAccount. When I click on shipping adress, the site content is in a way compressed than on other sites like Account details.
body.page-id-2669 #ocs-site { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; } .site-footer { margin-top: auto; }
June 26, 2020 at 7:58 am #1342800David
StaffCustomer SupportLast ditched attempt try this:
body.page-id-2669 #page { margin-bottom: 100px; } body.page-id-2669 .site-footer { position: absolute; bottom: 0; left: 0; right: 0; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 26, 2020 at 9:45 am #1342892nik9
David.. your a beast! Thank you so much!! Really Really appreciate it! π
Enjoy your weekend!
June 27, 2020 at 12:21 am #1343331David
StaffCustomer SupportAwesome – glad to hear that worked!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.