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 ?
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
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)
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.
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.
