Published site has huge white space

Hello,

This is my first time designing a website with webflow.

I’ve noticed that on my published site there’s a huge white space to the right of the page and a smaller one at the bottom. This doesn’t show up in the editor

This is only happening on the home page. Not really sure what I’ve done.

Looking through the forums and google hasn’t helped so far. I’ve gone through everything in the navagator and nothing seems to have massive padding, or size. Unless i’m missing something.

The white space at the bottom is because there isn’t enough content to fill the viewport height. Which results in white space being shown. The larger the screen, the more white space.

As for the white space on the right side, I’d recommend wrapping your content in a div (I’ve given it a class page-wrapper) and applying an overflow hidden. The cause is probably the slider that’s taking up all the space.

1 Like

Hi,
I’ve had a similar issue, and I saw various topics (and solutions) for problems with (big) white spaces. I encountered my issue when I bought a new 4K monitor. As this has a bigger screen / viewport compared to my previous monitor, I started to notice very large white spaces between my sections. Nothing seemed to help, removing any padding, margins etc. Every section, even the footer had space above and below. Also removing the section altogether didn’t help (i.e. just working with a div block instead of a section).

I noticed the white space also increased and decreasing when zooming out and in, in the browser.

Playing around, I realised that this behaviour is only occurring when the layout setting of the body is 'block. After I changed the body layout to flex (vertical), the issue was gone!

Maybe this helps others as well