[Resolved] Extend the footer for short pages

[Tanya]

No. Please refresh the referred pro-learn-more page. I have applied your CSS to all pages and this (longer page) has broken.

[Leo]

This is the CSS you are adding:
https://www.screencast.com/t/3AMwUMaP8yRJ

Which is not the same as what I provided here:
https://generatepress.com/forums/topic/extend-the-footer-for-short-pages/#post-1478995

Can you try to copy and paste my code?

The code should only be applied to the short page so we need to target those pages specifically.

[Tanya]

Leo, I have copied your code exactly. However, this is not what I want. Reason being is that different screen sizes will have different pages that considered to be “short”. Plus most of my pages are dynamic and I cannot predict how long they will be. The CSS has to work for all pages. Do you disagree?

[Leo]

Hmm dynamic pages make things a little more tricky.

What about just this?

body {
    min-height: 100vh;
}

[Tanya]

Nope. Short page still has white space after the footer. Long page is not affected in any way.

I wonder why this original CSS does not work anymore. It worked perfectly for all pages in float version of the theme.

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

[Leo]

One more try:

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

[Tanya]

Thanks Leo.

This CSS solves footer footer look for both short and long pages!
From a quick look I think body display:flex introduces a couple of layout issues to the pages though.

I will look into those issues and try to fix. Thanks for all your help on this one!

[Leo]

No problem 🙂

[Tanya]

Just to close this off.

The solution that worked for me to extend the footer color for the short pages is the original CSS I had before with the addition of content:””;

.site-footer::after {
    position: fixed;
    background: #110532;
    height: 100%;
    width: 100%;
    content: ""; 
}

[Leo]

Sounds good thanks for sharing!

[Author]

Posts