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