Extend the footer for short pages

[Tanya]

Hi Tom and Team.

I upgraded to GP 3.0 Flexbox option and loving it so far. Just fixing a couple of issues.
I used to rely on the following CSS to extend the footer for the short pages. Basically I want the background (same color as the footer) to fill in the remainder of the page at the bottom (after the footer), instead of white space being displayed.

This used to work and does not anymore after the upgrade. Could you please help? Thank you

.site-footer:after {
position: fixed;
background: #110532;
outline: 1px solid #110532;
height: 100%;
width: 100%;
}

[Elvin]

Hi,

Can you link us to the site in question?

You can add the site details on the Private information text area. Thank you. 🙂

A wise man once said:
"Have you cleared your cache?"

[Tanya]

Hi Elvin.

Please see the link to the test page. As you can see the page is short and there is white space after the navy blue footer. gm-footer.css file includes the CSS, which I have posted in my original question. Thank you.

[David]

Hi there,

all the methods to fix it to the footer may cause some other issues. However, you can try this CSS:

body {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.site-footer {
    margin-top: auto;
}

Just make sure to check it doesn’t affect any other of your layouts.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tanya]

Thanks David. I applied the suggested CSS. The footer did not extend, unfortunately.

[Tanya]

I thought I fixed it with removing ::after from my original CSS, but that removed the whole footer…

[Leo]

Any chance you can link us to the page in question with David’s CSS applied?

I’ve changed the topic status to Not resolved so you should be able to use the private info field.

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tanya]

Hi Leo. Sure. Thank you for reopening the topic.

[Leo]

I’m a little confused.

So the only content on that page is the footer widget?

And you want to position it at the bottom of the page?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tanya]

Hi Leo. I added some short text content to the page. The main idea is that this page is short, meaning footer begins right after the content, then footer ends and then there is a white space after the footer. I want that space to match footer color.

[Leo]

Try this CSS instead:

body.page-id-11935 .site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tanya]

Hi Leo. This CSS works for the short page, but does not work for the long page. I posted longer page link. The footer just hangs in the middle of the page.

[Leo]

Hmm that’s not possible as my CSS only targets that one short page with body.page-id-11935.

I just checked the pro-learn-more and not seeing any issues or the CSS being applied.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tanya]

Yes, sorry for not clarifying.

Try deleting cookies, since it is an included CSS and may not refresh automatically for all pages.

[Leo]

So is the issue resolved now?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts