Solving a Responsive Hero Section

Hey! Loving Webflow so far. It’s helping me enter the digital design realm. I’m starting with my portfolio that i hope to share soon. So, right now, forget the “a e s t h e t i c s” of it:

Objective: i’m looking to get the white section (the one where the logo is) almost to fill the vertical height of the browser, on all devices.

I thought it would be obvious to use “vh” to get that effect, at a 90 or 80 — something like that. My problem is with the mobile browsers collapsing their nav bars: makes the content recalculate and flicker when scrolling.

I then thought about using the “vw” to set up the height or some paddings/margins, since it looks more fixed. But this looks like a fail too. What i calculate in landscape mode, turns out a different thing in portrait mode.

Do you know anything about this problematic? Any help would be appreciated. I don’t know much about development; just crashing into this to see if i can do it. Thanks!

Take a look here but I prefer fixed heights on mobile.

I see… So this problem is tough.

Maybe i’ll go with “em” to create the space inside the blocks, and let the viewport decide what to show… I just don’t like what the viewport decides; for example, in mobile, switching between landscape/portrait.

Thanks, Antonio

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.