Footer Not Staying at the Bottom of my Page

Design help Layout & Design
1

hi everyone!
I feel like this is a persistent issue I run into frequently with webflow and no matter how many times i’ve watched tutorial videos and read thru forums, I continue to have problems.

i’d just like to make a footer that respects everything else on the page and stays at the bottom of the page. I don’t want it fixed, as I don’t want the user to see it unless they scroll to the bottom of the page.

it seems to be working on my other pages but not on a new page i’ve added with lots of copy. :thinking:
the body ALL pages class is set to height 100%, and the footer section spacing is set to Auto (per the online tutorial), but it’s overlapping content, and I can’t get it to respect the other elements no matter how hard I try.

any help is appreciated! thank you!

Here is my site Read-Only:
https://preview.webflow.com/preview/tod0910-beta-applicationcapture?utm_medium=preview_link&utm_source=designer&utm_content=tod0910-beta-applicationcapture&preview=d3fa5c8cad050170ca9cf48c564ded7d&pageId=65499283b043911855b7f327&workflow=preview

2

Unless you have a really good reason to I generally wouldn’t make the body flex layout.

Flex impacts how the child elements are processed, including their display type ( block, inline block, etc. ) positioning, even sizing since flex-grow, flex-shrink overrides those properties.

Pretty sure what you’re seeing is just basic CSS behavior.

3

thanks, @memetican . I appreciate the feedback.
I only went in that direction because the WebFlow University video instructed as such: https://www.youtube.com/watch?v=NSnx-2Ztyfo

that’s why i’m perplexed. every time I follow this video (I think i’ve watched it 100x) and implement the instructions, I don’t get the result i’m hoping for.

4

Interesting. In certain use cases it could make sense I suppose.
They seem pretty limited to me though.

I do see Webflow occasionally use CSS in ways that create design issues.
One of the main ones I’m battling with is that in interactions when you e.g. move an item, Webflow now does that using 3D transforms in the CSS, which changes the stacking order from the browser’s perspective.

It took me a week to debug a slide-out sticky ToC that for some reason couldn’t slide and stick at the same time.

5

that is interesting. I may explore alternatives for getting this to work because I follow the same guidance every time and often have issues with it as my sites build out. it’s both frustrating and annoying.

I always struggle to find a simple way to do something that seems basic to me (because I do it with almost every site I create).