Archived topic

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

9 replies · Started by nik9 on June 25, 2020

Viewing posts 1–10 of 10

June 25, 2020 at 3:11 pm #1341999

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 #1342122

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?

June 26, 2020 at 12:28 am #1342274

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 #1342282

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

June 26, 2020 at 5:50 am #1342503

Thanks David,

So is there no easy fix for this?

Cheers

June 26, 2020 at 6:06 am #1342519

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

June 26, 2020 at 7:41 am #1342623

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 #1342800

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

June 26, 2020 at 9:45 am #1342892

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

Enjoy your weekend!

June 27, 2020 at 12:21 am #1343331

Awesome - glad to hear that worked!

This archived topic is closed to new replies.

Start building better websites today.