Pro Theme (2020 Question): Footer at Bottom of Viewport OR Content, Whichever is Greater

Hello… I tried to apply fixes I found in the forum, but they seem to be from X theme, or from 2 years ago and no longer seem to work.

I need my footer to stay at the bottom of the viewport if the content is sparse, but not stay fixed if the content is actually greater than the viewport area…

This is mainly only an issue on the My Account page for woocommerce… but would be an issue on any page with limited content.

There was a fix in the forum from 2018 that said this:

@media (min-width: 980px) {
.x-container.max.width.offset {
min-height: calc(100vh - 100px);
}
}

So I tried that, but it doesn’t do anything.

Additional Note: I tried to apply settings to the footer container… but I didn’t know how to accomplish the same thing… if possible. If it is, I’d prefer to use the settings.

Can you tell me the CSS and an optional settings method? That way I can try both.

Please help. Thanks!

Hi Michael,

Since you don’t want a fixed footer, we don’t have available settings. The footer will follow the content height. That is why the CSS fixed is to set a minimum height on the pages with shorter content. It might not work if you have diferent page layout settings because the selector is wrong, or if you do have CSS syntax errror prior to that custom CSS.

Please inspect the specific page with this footer issue. Check the container element and use that selector instead. The following guide might help you:

If in case you are sure using the correct selector and the issue still exist, please check all your custom CSS. Either from THEME OPTIONS > GLOBAL CSS or page CUSTOM CSS. Make sure all open brackets have corresponding closing brackets {}

If you do have caching, please try to clear cache too.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.