Make footer stick to screen bottom?

Hi,

I noticed on my page that the footer hovers above the screen bottom on larger screens than 1080p (sometimes also those if a site has not enough content in it’s first or second stage).

Is there a way of sticking the footer to the bottom (i. e. with CSS,…) IF the screen size higher than the px of a microsite?

The only solution I found until now was to make the footer always stick to the bottom, which takes a good portion of the screen, that should ideally still be usable, of smaller screens.

Regards,
Johannes

Hello Johannes,

Try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .page-wrap {
        min-height: calc(100vh - 230px);
      }
    }

Regards,
Kharis

Hello Kharis,

thanks for your quick help! Sadly this didn’t do the trick. Is there anything I need to configure in Sydney or pay attention to when pasting the CSS?

I already have one entry to hide Google’s Captcha-Batch, maybe there’s a problem with the combination?

Regards,
Johannes

Hello Johannes,

I am sorry. Please provide us a link to your site to help us check and observe what exact solution to suggest.

Regards,
Kharis

Hi Kharis,

my URL is https://www.jayhenrix.com/ .

Regards,
Johannes

Hello Johannes,

Thank you for sharing.

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .page {
      padding-bottom: 70px;
    }

    .site-footer {
      display: block;
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
    }

Regards,
Kharis

Hello Kharis,

thanks for the new CSS! I had similar CSS place already but got rid of it as it always fixed the footer on the screen, also on smaller devices, which means they lose screen real estate.

Is there a work-around to the “fixed” position? If possible I’d like my footer to stick to the bottom of the screen if it would be cut off, but still behave like it does without the fixed-CSS parameter on smaller screens, so nobody loses screen real estate or has a floating footer on their end (if possible of course, I could also imagine that WP is the limit here?)

Regards,
Johannes

Hello Johannes,

To help me a bit more efficient, please take a screenshot where the appears and share it here.

Regards,
Kharis

Hello Kharis,

here’s the problem:

Without CSS on shorter pages (especially new ones that get filled with content over time) the footer floats in the 50px bottom margin relative to the page I’ve set in Sydney.

Hope this helps to clarify, thanks again for taking the time!

Regards
Johannes

…and that’s what I’m trying to avoid (iPad screen size):

The menu disappears when scrolling but the footer stays on the screen.

Regards
Johannes

Hello Johannes,

I am sorry for the delay. Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .page-wrap {
      min-height: 100vh;
    }

Regards,
Kharis

Hi Kharis,

thanks for coming back! It works pretty much how I anticipated a solution. It’s a good work-around.

If you find something that can “automatically” (without manual pixel input) fit the footer I’d be really happy to know about it.

Thanks for your help!

Regards,
Johannes

Glad to know the code worked for you.

If you find something that can “automatically” (without manual pixel input) fit the footer I’d be really happy to know about it.

Try this code:

    .page-wrap {
      min-height: calc(100vh - 150px);
      min-height: -moz-calc(100vh - 150px);
      min-height: -webkit-calc(100vh - 150px);
      min-height: -o-calc(100vh - 150px);
    }

150px should be equal to the site’s header height.

Regards,
Kharis

Hi Kharis,

the new code doesn’t seem to work…

Here’s what I get in the browser inspection tool:
59

Regards,
Johannes

Hello there,

Probably web browser can’t accept calc(-50vh) value for it’s invalid. Please try

    .page-wrap {
      min-height: calc(100vh - 50px);
      min-height: -moz-calc(100vh - 50px);
      min-height: -webkit-calc(100vh - 50px);
      min-height: -o-calc(100vh - 50px);
    }

Regards,
Kharis

Hi Kharis,

I’m getting the same result as with the above code.

Regards,
Johannes

Hello Johannes,

I found your code is now

    .page-wrap {
        min-height: 87.5vh;
    }

Is it fine to you?

Regards,
Kharis

Hi Kharis,

it is the best solution I had running until now, as it works how I described above on smaller screen sizes.

If there’s the possibility to get the position automated it’d be a better solution. When inspecting my site with the responsive browser tool in higher than 1440p resolution you’ll find the footer still floating on my main page.

Regards
Johannes

Hello Johannes,

Try this code:

    .page-wrap {
        min-height: calc(100vh - 116px);
    }

Regards,
Kharis

Hi Kharis,

I now got it to work as I wished with a little modification.

.page-wrap {
    min-height: calc(100vh - 14px);
}

Thanks a lot for your help!

Regards,
Johannes