Footer

Hi,

Easiest way is to set a higher max height for the page, so that the footer is never hanging like that:

.main-inner { max-height: 700px; }

If you want to go the javascript way instead, here is a sticky footer script that works with different footer heights:
https://www.drupalcoder.com/blog/cross-browser-sticky-footer-with-fluid-height-using-jquery.html

To limit the width of the footer, do:

#footer-bottom { margin: 0 auto; max-width: 1280px; }

Okay, thanks.

But still stuck with footer limitation.

Page limited to 1024px.

.container-inner { max-width: 1024px; }

Set your code with my value:

#footer-bottom { margin: 0 auto; max-width: 1024px; }

Result – footer are not the same with page https://i.imgur.com/PaA4lnB.png
And how to remove white background effect on footer?

–

.main-inner { max-height: 700px; }

This code has no effect, or am I doing something wrong.
Using 1300px as well.
I will try method with javascript later.

Sorry, I meant min-height, not max-height for the main-inner one.

For the footer, try this instead:

#footer { margin: 0 auto; max-width: 1024px; }

It works! Many thanks.

With sticky footer – I will try to do using javascript.