Footer won't stick to the bottom

I’ve been looking at this for more than 30 minutes. Need help.

Body is Flex, vertical. Section where I got footer div, has top margin auto. However it’s not sticking to the bottom when I publish the website.

Here is my site Read-Only: LINK
Here is link to the live website: LINK
Yes I’ve watched Webflow Tutorial on Youtube.

hi @Bestbubbledev no one can see your setup as your read-only does not redirect.

1 Like

Stan thanks for letting me know :pray: Just edited the link. You should be able to preview my editor.

hi @Bestbubbledev what are you trying achieve as I can see your footer only on home page and beside footer non responsiveness I can’t see any issues.

Have you tried this?

Yeah there are no issues inside the editor. But when you check the live website footer is not sticking to the bottom of the screen.

No idea why. I’ve just right now published the changes and the issue remains active.

hi @Bestbubbledev can you explain more in detail you are trying to achieve? What page you have issues? How it should look as footer on Home page works as expected! what do you mean by

This is a Section element called footer. Inside is a div element called footer.

I want Section to stick to the bottom of the page. Like any footer on any website in the world. As you see in the above image Section is stuck to the bottom like I want.

However when I publish the page the same Section element does NOT stick to the bottom on live website. Here’s the screenshot from live website.

Ok I found the issue. Body is a Flex Vertical. It has Gap of 60px. And for some weird reason Gap is applied to the end of the element as well. I’ve experienced the same issue with container element as well. Anyway I think I’ll group all the sections on the page under a main div, make it flex with the gap and I should be good.

what about setting padding-bottom: 0 on your footer section @Bestbubbledev ? This will remove space under footer.

CleanShot 2024-03-16 at 06.38.30

I can’t see any other bottom space.

1 Like

Thanks for all your help Stan. I’ve implemented the changes I mentioned above and it works fine.

Is it a best practice to have additional container besides body element? Now my elements tree or navigation looks like this :point_down:

I would not say it is the best practice as it depend on project but it is common practice as you do not want to modify body element until is really necessary. Another common practice is leaving navigation out of this content wrapper. The footer doesn’t mother as it can be inside or outside based on design you would like to achieve.

1 Like