Streaming live at 10am (PST)

Footer moving on different screen resolutions


#1

Hey guys, at 1280 x 800 my footer seems to stay perfectly at the bottom of the page. When I view it on a 1920 x 1200 screen there’s a large gap that I cannot seem to move for the life of me. This is occurring on 2 pages, Portfolio page and the home page. Even in Incognito mode the webpage still has the gap on larger screens.

Anyone have any ideas as to how I can fix this for all the page. I tried messing around with the fixed positions of the footer by that didn’t fix anything ?


Here is my site Read-Only: https://preview.webflow.com/preview/adespanelport?preview=496cdf927f5ed3a8c3536691f6a0f076

Live version of my site: http://adespanelport.webflow.io/


#2

Hi Ade @adedamolisher

Your content on the homepage and portfolio doesn’t fill the screen in some cases (on my screen and screens larger than yours), so the footer can only sit at the bottom of what’s there. The total content on those pages is less than 100VH (Viewport height)
Screen1
CloudApp

You can either… make the total section+ header = more than or the same as 100vh or give the footer a position of fixed, bottom. (Screen2)
CloudApp

If an element is set at 100VH it will sit at 100% of that devices screen height, no matter what device.
Set it at 50VH it will be 50% of that devices screen height, and so on.

If you didn’t want it to be too intrusive, you could add an interaction so the footer shows when you scroll one way, and hides when you scroll another.


#3

Thanks Mark,

I managed to fix this following your instructions. Instead I created another footer symbol for the about page to keep it at the bottom below the text. And then made the other pages fixed to ensure that this does not have the gap at the bottom.

Might not be the right way to do it, but it seems to solve the problem.

Thanks for the speedy response!