Keep the footer at the bottom on short pages

Awesome - glad to be of help.

Hi David,

Thanks for the code in this thread. It worked to get the footer to attach to the bottom of the screen for shorter, dynamic content. However, I'm having an odd issue where on the initial page load the main content block is being positioned half off the page, to the left. This is the Elementor content that's getting positioned off the page. The main nav and footer for GeneratePress is working fine.

Any ideas?

Hi there,

this is probably due to Elementor loading its CSS in the footer - see here:

https://docs.elementor.com/article/249-embedded-template-css-loading

And this Git where the user provides code to move it to the head:

https://gist.github.com/nicomollet/fc8a69b447f21cf8f4245f77d5a33d63

Personally i would avoid all of this and on those short pages set the minimum height of the section to fill the page, you can set it to 100vh to fill the viewport

Thanks, David. I tried several things before writing here, one of which was setting the height of that section to 100vh. When I did that, the footer was always below the viewport and I had to scroll the page to see it. I'd rather have it stick to the bottom of the viewport if the content doesn't push it past that.

Would you expect this to work by just setting 100vh? It's possible I'm missing something when I used that setting.

If there isn't a good answer for the 100vh issue, can you let me know where to place the PHP code you referenced in the last response.

Thanks again.

Give the Section a class of fit-viewport then add this CSS:

.fit-viewport {
    min-height: calc( 100vh -  300px );
}

Change the 300px to total the height of header/footer etc.

That worked! In case this helps anyone else, I ended up needing to subtract the height of my header and footer, while accounting for differences across device types.

Thanks so much for your help. The support you and the rest of the GeneratePress team provides is outstanding. It really makes a difference.

You're welcome