100vh section not shrinking on smaller screens

I am trying to make a single responsive page which scales to the size of “any” screen without becoming scrollable. My text and images appear to scale nicely but the white space does not! I have a parent section set to 100VH but something prevents it from shrinking. What?

https://preview.webflow.com/preview/js-design-test?preview=9f3274c36a5d0644b3ccc08181fb34c6

Yeah no, it won’t automatically shrink the entire div from 100vh. I know what you’re thinking. But actually, you want the opposite. If you take a minute to ponder, you don’t really want it shrinking based on the screen, because its a container…

You want the container of content to hold its size, but you do want content to scale - inside!

For each device, you’ll have to reduce the VH down for each screen. In my head at first this seemed backwards to me… but after you sit on it a while… Wrappers and Containers, I don’t want to move at all.

Hope that makes sense :grin:

Sorry, Gary, I cannot make sense of your reply.

But after I set the body to 100vh and removed the parent section it works better on my iPhone, at least most of the spurious white space is gone. No idea why though.

Yep I understand what you mean. Add to body 105vh to remove the white space. You can go above 100 as far as you need.