- This topic has 24 replies, 4 voices, and was last updated 3 years, 6 months ago by Leo.
-
AuthorPosts
-
October 7, 2020 at 8:20 pm #1477698Tanya
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%;
}October 7, 2020 at 9:52 pm #1477755ElvinStaffCustomer SupportHi,
Can you link us to the site in question?
You can add the site details on the Private information text area. Thank you. 🙂
October 8, 2020 at 6:02 am #1478349TanyaHi 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.
October 8, 2020 at 7:51 am #1478682DavidStaffCustomer SupportHi 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.
October 8, 2020 at 7:57 am #1478695TanyaThanks David. I applied the suggested CSS. The footer did not extend, unfortunately.
October 8, 2020 at 8:53 am #1478788TanyaI thought I fixed it with removing ::after from my original CSS, but that removed the whole footer…
October 8, 2020 at 9:07 am #1478810LeoStaffCustomer SupportAny 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!
October 8, 2020 at 9:49 am #1478884TanyaHi Leo. Sure. Thank you for reopening the topic.
October 8, 2020 at 10:10 am #1478930LeoStaffCustomer SupportI’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?
October 8, 2020 at 10:42 am #1478987TanyaHi 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.
October 8, 2020 at 10:46 am #1478995LeoStaffCustomer SupportTry this CSS instead:
body.page-id-11935 .site-footer { position: absolute; bottom: 0; left: 0; right: 0; }
October 8, 2020 at 10:55 am #1479001TanyaHi 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.
October 8, 2020 at 11:00 am #1479006LeoStaffCustomer SupportHmm 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.
October 8, 2020 at 11:04 am #1479012TanyaYes, sorry for not clarifying.
Try deleting cookies, since it is an included CSS and may not refresh automatically for all pages.
October 8, 2020 at 11:09 am #1479015LeoStaffCustomer SupportSo is the issue resolved now?
-
AuthorPosts
- You must be logged in to reply to this topic.