Footer wont stay footed

i put a bunch of text into a page and the footer jumped to the middle of it and its got an opacity, why has is it stuck in the middle and how do i turn off opacity( i never added any)

https://preview.webflow.com/preview/hogarths-beautiful-site?utm_medium=preview_link&utm_source=designer&utm_content=hogarths-beautiful-site&preview=8527020377c0c08c39536faa05af02dc&pageId=64bf4dc28945f48212f03d68&workflow=preview


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

Hi Hogarth :smiley:

You set the height of the “section 5” to 100vh. So you need to change it to auto, or, if you want to have this height and you need to hide the remaining texting, you just change the overflow hidden.

  1. Changing the “section 5” height to auto

  2. Displaying overflow as “hidden”

Set this comment as solution, connect with me on Linkedin and let me know when you need more help :smiley:
https://www.linkedin.com/in/alexis-matos/

Thanks!

As explained by @alexissilva your problem is the set viewport hight. I would also suggest to go for a sticky footer. For that set the dislpay of the body element to flex/vertical and set the top margin of the footer to auto. This way the footer always stays at the ground, even if you have less content then the view port height. Funnyly this also solves your opacity problem, eventhough I cannot explain why.

appreciate your help, i dont understand VH at all then. should i use position fixed bottom for my footer? will this cause any problems?

do you suggest position fixed for bottom, i just tried it, but am reluctant to use it because you both didnt suggest it.

I would’t set it to position fixed, since that could cause other problems. With fixed the element is taken out of the “normal” elements flow and lies above or under the other elements in the documents. Set the body to flex/vertical. Then you can set the footer top margin to auto, this way it pushes itself away from everything above (check out this webflow university video).
With the VH problem it’s simlar. You give it the hight of the viewport but the content is bigger. This way the content pushes everything away from the bottom, including the footer.

I would not recommend, because it will hide some elements behind the footer.
The best solution would be to keep the Height as Auto and Overflow hidden or set the body with display: flexbox in column and then give margin-top auto to the footer.

The VH is the viewheight, so it will cover the height of the screen.

If you want a pattern, it is better if you set the body with flexbox and then the navbar with margin-bottom to auto and the footer with margin-top to auto. So you can do it in all projects and you will always have the security you need! :smiley: