Problems With the Footer

Hi,

I’m having an issue with the footer on my site. On the homepage, it is fine. It’s at the bottom of the page where it should be. Here is a link to a screenshot:

However, on all the other pages, the footer is not at the bottom of the page. Rather, it starts wherever the writing has stopped. This leaves a bunch of blank space between the footer and the bottom of the page. Here is a screenshot of that, using the about page as an example:

Could someone please tell me how to best fix this so that the footer always shows up at the bottom of the page?

Thank you in advance for all your help

KDJ

Hi there,

You can use this CSS code below to keep the footer stay at the bottom of the page:

.site-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
}

Put the code into customize > additional CSS.

Regards,
Awan

Hello Awan,

THank you for your suggestion

Unfortunately, I met with mixed success. While it did make the footer stay at the bottom of the page on the pages I was having a problem with, it messed up the footer for my homepage, which was fine. Now, instead of being at the bottom of the page there, it is near the top, on the slider. Here is a screenshot of that:

Is there anything that will address this as well?

Hi there,
Please add this:

body {
    position: relative;
}

Regards,
Awan

Hello Awan,

I tried as you suggested, but that only made it go back to the way it was before, on all pages, before any CSS was added. It was once again fine on the front page, but up too high on the others.

Hi,

I am sorry, I forget to add the height setting of the body rules on the code in above. Please replace this custom code:

body {
    position: relative;
}

with this:

body {
    position: relative;
    min-height: 100vh;
}

if it still not working properly, please share your site URL here, so I can check it directly.

Regards,
Awan

Hello Awan:

That did it, thanks for your help! :slight_smile: