[Resolved] How to Force Footer to Bottom of Viewport

Home Forums Support [Resolved] How to Force Footer to Bottom of Viewport

Home Forums Support How to Force Footer to Bottom of Viewport

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #974256
    Michael

    Hi,

    Is there any way to force the footer and copyright sections to the bottom of the viewport . . . so they are not left floating in the middle when there’s just a small amount of content on the page?

    I’ve tried this code from the forum (https://generatepress.com/forums/reply/891498/), which partially works, but it’s not quite right, it places the copyright section partially below the bottom of the viewport:

    html,
    body {
    height: 100%;
    }

    body {
    display: flex;
    flex-direction: column;
    }

    #page {
    flex: 1 0 auto;
    width: 100%;
    }

    See live example at included URL: https://claimexperts.co/upload-claim-files/

    #974259
    David
    Staff
    Customer Support

    Hi there,

    try this instead:

    html,
    body {
        height: 100%;
    }
    
    body {
        display: flex;
        flex-direction: column;
    }
    
    #page {
        width: 100%;
    }
    
    .site-footer {
        margin-top: auto;
    }
    #974364
    Michael

    Perfect. Thanks!

    #974366
    David
    Staff
    Customer Support

    Glad to be of help

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