[Resolved] Keep Page footer at the bottom of the page when the content does not fill

[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 🙂

[Leo]

Hi 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?

[nik9]

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?

[David]

Hi 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 change body for #ocs-site

Beware though as this may have some unexpected effects

[nik9]

Thanks David,

So is there no easy fix for this?

Cheers

[David]

You can apply it just to the accounts page.
Use this for the CSS selector: body.page-id-2669 #ocs-site

[nik9]

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;
    }

[David]

Last 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;
}

[nik9]

David.. your a beast! Thank you so much!! Really Really appreciate it! 🙂

Enjoy your weekend!

[David]

Awesome – glad to hear that worked!

[Author]

Posts