I’m working on the layout of different breakpoints right now. I don’t know why there is such a large white space showing under the footer and there is no way to get rid of it. Does anyone know why it happens?
And here is the read only link:
https://preview.webflow.com/preview/hazels-radical-project-be2fe3?utm_medium=preview_link&utm_source=designer&utm_content=hazels-radical-project-be2fe3&preview=3afa5d734b6e0999b806d4fffef93d88&workflow=preview
@hazelwyw - that is just extra vertical space in the viewport that has no content in it. You could sticky your footer to the bottom of the page or increase the height of the body area to take up the entire viewport height.
Hi @sam-g
But if I just set the footer as absolute at the bottom of the page. the white space still shows up.
@hazelwyw - yea, the height of the viewport is taller than the content of your page so the areas that have no content are just going to be white. You could increase the height of the content, make the content area 100% of the viewport height using height: 100vh or move the gradient background to the body element (where the white is now).
@sam-g Would you mind to show me where I can change the viewport height?
@hazelwyw - the viewport height is depended on the visitor. It changes based on the size of their browser window. It’s essentially the available vertical screen real estate your page has on their device. Does that make sense?
In Webflow you can set the height of your container element Scroller by selecting it and changing the height property like this:
Which results in this:
I’m sure this isn’t exactly what you are going for, but you can see it solves the issue you are asking about.
You’ll need to adjust different properties to get the layout you are looking for, but unfortunately you have no control over your visitors’ browser size so you have to account for different sizes in your design.
That does make sense to me. Thanks for you help Sam.
@hazelwyw - glad I was able to help, can you mark the solution to close out the thread?
