How to position footer at the bottom whilst keeping it in relative position

I’ve been testing my page recently and how it works with different resolutions; though there is a lot of work to do I am pretty confident in tidying up most of it EXCEPT this one issue

If I make my footer “fixed” or “absolute” the footer appears at the bottom as it should however if I play with my browser resolution and make it small enough the footer then overlaps my container (big grey box with the checkboxes).

Screenshot:

Now I know that if I wanted to keep the footer “aware” of my other elements the correct thing to do is to make it a “relative” positions. This works perfectly however now in full screen resolution the footer appears in the middle of the screen and won’t stick to the bottom of the page as it did when it was in the fixed or absolute position.

Screenshot:

Any ideas? please help!


Here is my site Read-Only: Webflow - Mobile Testing

Bump :frowning: still struggling with this

I am not sure what is going on It’s not doing it for me the footer goes down when going to landscape and portrait mod. Make it static so it can stay at the bottom. Now to keep it from getting cut off you can use vertical Center if you would like or adjust it to your liking. Also make sure the text box is set to 0 so it don’t misplace on the page. If you have the same issue pleases feel free to ask me. or any other issues.

1 Like

Thanks for your reply @shaqueal

Static doesn’t work either unfortunately and when I make the position fixed/absolute that does bring the footer to the bottom however when I play with the resolution (resizing the window manually) it doesn’t stay aware of my container element and overlaps it.

I have tried making it vertical centre however that didn’t do anything? unless I am misunderstanding you - did it work for you? can you send a screenshot please?


The tablet and phone mod’s you will have to adjust to fit. different size screens, but is shouldn’t be my much.

1 Like

Thanks @shaqueal for your responses.

I think I may not have communicated my issue clearly. I have taken a screen recording to show you what I mean.

First publish is trying it 100% your way and as you can see the footer appears right under the container instead of at the bottom.

Second publish is me changing it to fixed or absolute (can’t remember) and the footer appears at the bottom as it should however when playing with the resolution it overlaps the container instead of being aware of the surrounding elements like everything else on the page

Third publish is me changing it to relative which does keep the footer aware of the other elements however once again will not stay at the bottom (very annoying!).

I appreciate your help!

URL to video:
https://bit.ly/39hxNgw

Hi, Boris’s here is a screenshot of what you can do. I understand, but this is the best way to fix the issue you are having so you don’t have to deal with the footer moving when it shouldn’t.










1 Like

Sorry @shaqueal; it works at face value inside the webflow editor but when publishing the website, the footer doesn’t behave like a footer and just sits unattached from the bottom of the page (where a footer should be)

See video below (just in case I change it in testing).

When looking at the changes you have done in the editor it’s fine, but I can see what you are speaking about when it’s published. Did you have the publish site already up before you change it and just refresh the page are did you click on the icon on the publish link on the dropdown. help some one
help some two
The reason I’m asking is sometimes it does not change sometimes it buggy. If you did then something in the layout of the website is affecting it or you may be running into what I have dealt with before which is browser cache where the page is different on your side and you are the only one that sees it. try a different device to see if it’s the same. Also, can you share the publish link so I can see it? if it’s not the issues then something on the page is causing it.

1 Like

Hey @shaqueal sorry for the late reply!

It is definitely not that because I notice the changes that I made in other small ways however unfortunately not in the way that I want.

Here is the external URL:
https://pjx-mini-slider-25adea484-019a01c442ec0.webflow.io/

It’s not doing it for me I have tried both my laptop and phone and it still shows up at the bottom as it should. Have you tried it on a different device or in incognito for chrome? Also, it seems like you are dealing with that issue that I’ve dealt with before. check out this form: Website don't show the same as preview

This is were my bottom half of my background image doesn’t show up in the publish site but it’s fine in preview and the editor. That is what I am thinking is going on with your site.