[Resolved] Extend the footer for short pages

Home Forums Support [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 12 months ago by Leo.
Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #1477698
    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%;
    }

    #1477755
    Elvin
    Staff
    Customer Support

    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?"

    #1478349
    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.

    #1478682
    David
    Staff
    Customer Support

    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.

    #1478695
    Tanya

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

    #1478788
    Tanya

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

    #1478810
    Leo
    Staff
    Customer Support

    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!

    #1478884
    Tanya

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

    #1478930
    Leo
    Staff
    Customer Support

    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?

    #1478987
    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.

    #1478995
    Leo
    Staff
    Customer Support

    Try this CSS instead:

    body.page-id-11935 .site-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
    #1479001
    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.

    #1479006
    Leo
    Staff
    Customer Support

    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.

    #1479012
    Tanya

    Yes, sorry for not clarifying.

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

    #1479015
    Leo
    Staff
    Customer Support

    So is the issue resolved now?

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