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

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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 🙂

    #1342122
    Leo
    Staff
    Customer Support

    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?

    #1342274
    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?

    #1342282
    David
    Staff
    Customer Support

    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

    #1342503
    nik9

    Thanks David,

    So is there no easy fix for this?

    Cheers

    #1342519
    David
    Staff
    Customer Support

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

    #1342623
    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;
        }
    #1342800
    David
    Staff
    Customer Support

    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;
    }
    #1342892
    nik9

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

    Enjoy your weekend!

    #1343331
    David
    Staff
    Customer Support

    Awesome – glad to hear that worked!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.