[Resolved] Extend the footer for short pages

Home Forums Support Extend the footer for short pages

  • This topic has 24 replies, 4 voices, and was last updated 6 months ago by Leo.
Viewing 10 posts - 16 through 25 (of 25 total)
  • Author
    Posts
  • #1479019
    Tanya

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

    #1479024
    Leo
    Staff
    Customer Support

    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.

    #1479032
    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?

    #1479035
    Leo
    Staff
    Customer Support

    Hmm dynamic pages make things a little more tricky.

    What about just this?

    body {
        min-height: 100vh;
    }
    #1479043
    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%;
    }

    #1479047
    Leo
    Staff
    Customer Support

    One more try:

    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .site-footer {
        margin-top: auto;
    }
    #1479071
    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!

    #1479357
    Leo
    Staff
    Customer Support
    #1497004
    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: ""; 
    }
    
    #1497301
    Leo
    Staff
    Customer Support

    Sounds good thanks for sharing!

Viewing 10 posts - 16 through 25 (of 25 total)
  • You must be logged in to reply to this topic.