Hi! I just got started with webflow. Looks great but I’m having some trouble getting to grips with how it works - I am trying to resize my hero section to fill the whole page of the browser. Adjusting the width seems to make a logical difference, but changing the height makes no difference unless I set it to px. Why is this? how can I get this to work?
Also, in the tutorials the unit vh and vw are discussed but they don’t appear in my width / height etc. if anyone could explain that too i’d be grateful.
At the moment your section’s height is defined only by the sum ot the top and bottom padding. Apart from that, HTML considers that your section has no height, whatever %age value you enter. This happens when the height of the parent is unknown. % height is a %age of the height of the parent, so that must be known by the browser.
If you want to use % height on a section, you have to add height:100% to the body first. So 50% on your section will eman 50% of the height of the viewport (the current body viewport). (“viewport” is the browser window)
But instead you can use the VH unit. Type 50vh and your hero section will get a height of 50% of the viewport height (VW exists to, %age of width of the viewport)
If you use height=100vh, your section will always take up the full screen, whatever the device it’s shown on.
Also a complete novice here - I’m trying to build my intro page with the section taking up the entire vp, no scroll. It appears as if I have succeeded because none of my breakpoint pages scroll.
However, in designer & on preview, the smartphone page appears so long [beyond 100% height] even though it does not scroll.
Is this a Webflow default appearance? Do I need to publish the page to see the live viewport?
I know what you mean with this, it’s very long, like it’s the iPhone 18 or something?! Although 100% is 100%, the screen will be much shorter on a mobile device. It’s because it IS 100% of whatever viewport, it just so happens the designer viewport is long.
You can resize the browser to help with this and preview more likely what the mobile viewport will actually be like… if you make the screen smaller from the bottom, you can still use the designer.
I was just about to send a link to Vincent when I saw your response! It dawned on me yesterday as I was driving & pondering (HA!) that maybe it was my browser window (I’m on a 34" monitor, so of course it’s going to be long )
Again thank you for sending me that - I can’t believe how helpful & quick the Webflow community is! You guys are really winning me over! (came from Muse)
I have more Qs - but I should probably post them in a relevant category! Thanks @vincent too for responding!
Although 100% is 100%, the screen will be much shorter on a mobile device. It’s because it IS 100% of whatever viewport, it just so happens the designer viewport is long.
)