Streaming live at 10am (PST)

Footer not sticking to the bottom

On the contact page I can’t figure out how to make the footer stick to the bottom without messing up nav bar, on homepage footer is not even sticking. Can anyone please find a solution for me which will work on all pages I currently have? One more issue, on contact page the background of the footer (which is black) only take the certain area of the screen but I want it to expand it to the edges of the screen. Thanks for reading

https://preview.webflow.com/preview/ux-portfolio-d14ba4?utm_medium=preview_link&utm_source=designer&utm_content=ux-portfolio-d14ba4&preview=a57717a226d870aa054db92c9e874927&pageId=61d6cc9ab220008ed36b03ab&workflow=preview

Also I recorded a loom video:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

The page looks fine to me in Webflow. Can you further explain the issues by recording your screen using loom.com ?

1 Like

Hey there, this is the loom video I recorded:

Hi @abirdesign, the footer symbol in the home page is not placed directly under the body as in the case of the contact page. I would move the footer on the home page directly under the body like so:

Shared with CloudApp

On the background color, the Home page has a Body class applied, but on the contact page there is no Body class applied to the Body, I might first set the Body class on the contact page, then see how things look.

I hope this helps

Still not working, I guess it was mistakenly put outside otherwise it was inside (great eye you have). I now followed your all advice yet no change there is :frowning:

One good thing happened just now, I made another div block and gave it a ‘Glossy effect’ class, now the nav bar looks fine and the footer’s background is expanding. But the footer is yet not sticking to the bottom.

Hi @abirdesign, thanks for your reply.

I took a look and the footer was still within your wrapper, For the footer to be anchored to the bottom of the viewport, I would put the footer directly under the body, see here how it should look like on the Contact page:

Shared with CloudApp

I would also do this on the home page:

Shared with CloudApp

On the Footer, you can give that a Width of 100% to be the width of the viewport:

Shared with CloudApp

Alternatively you can leave the Footer nested in the div with the Gallery Effect bg class and give the Body and the Gallery Effect bg class a height of 100%, then use display flex on the Gallery Effect bg class with a vertical direction and set flex child sizing to grow if possible:

Shared with CloudApp

Let me know if that helps

1 Like

Thank you very much, I am so grateful to you for so fast response and for making this community so lively. The former method solved the issue, with the latter one I tried to follow but then it’s not working exactly. I will go with the former one which is much simpler. Thanks again for all the help :slight_smile:

1 Like

I am sorry but I have to thank you again, the latter method also worked! How it didn’t worked earlier because I am stupid lol. I thought I was using the flexbox on Glossy Bg class but I wasn’t. Thanks, you are awesome!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.