Streaming live at 10am (PST)

100vh section not shrinking on smaller screens


#1

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


#2

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:


#3

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.


#4

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.