How to ensure hero content "stretches" equally across all devices?

Design help Layout & Design
1

Hey there! I’m new to Webflow so hoping someone can help. I’m learning Webflow via building my own website, and currently I want to achieve the effect that my hero content – title and caption – stretch out equally on every device, so that all content is always visible above the fold. Right now I find it all a bit jumpy and on my mobile, for instance, the caption is not above but below the fold.

I’m using EMs, but I wonder if I should be using % instead for this? Would appreciate if someone pointed me out to a correct setting.

I want to achieve something like here: https://www.lummelunda.tech/

Thanks a lot!!

Here is my site Read-Only: Webflow - Olga Rabo · Product Designer

2

Hi Olga,

By definition, the fold is at 100vh, meaning 100 viewport height. If you set the height of your hero section to 100vh, it will exactly fill the visible height. You’ll need to adjust your font sizes and padding to fit your title properly.

I’d also probably set a minimum height of something like 500px so that if the vertical space is too narrow, it doesn’t break the hero entirely ( in that exceptional case, it would simply extend past the fold ).

1 Like