How does Webflow interpret landscape orientations?

Design help General
1

Hi everyone,

Quick question about how Webflow interprets landscape orientations in mobile views.
In landscape, does it take in consideration device resolution or actual device orientation ?

I am previewing the site on a quite large screen size mobile device (Huawei P30 Pro — 1080 x 2340 pixels). When I am entering landscape orientation mode, it displays the tablet portrait version of the site (which I understand is truly logical if it is dependent on resolution, not orientation).

With that being said, is there any way to work around this with custom codes or anything ? Like to “force” the display to show the true Webflow landscape layout instead of the Tablet portrait one ? No matter the landscape screen resolution.

Why Am I looking to force the displayed layout ?

  • Because I have got a locked Height: 100 VH container with an overflow:hidden in the Tablet Portrait layout.

  • I have changed that locked Height : 100VH to Height: auto in WF landscape layout, to let the content flow down and avoid it being cut off-screen by the restricted locked 100VH + overflow hidden.

Why not using the Min. Height : 100VH instead ?
Because in portrait mode, I wanted to have all my contents perfectly fitting to the screens in 100vh.
But there is the famous issue of the 100VH “bug”, where 100VH contents are pushed down by some browser’s UI : (The trick to viewport units on mobile | CSS-Tricks - CSS-Tricks) So I had to use custom code to fix it. And the custom code requires a defined height of 100VH. (which is unnecessary on the landscape layout, but there, is the tricky part. Mobile devices with high resolutions are, once oriented in landscape mode, getting the Tablet portrait version so all the locked 100VH rule are getting applied.)

Hope I was not too confusing :sweat_smile:

Thank you :smiley:

2

Last time I checked the CSS only default breakpoints based of max-width are used.

@media screen and (max-width: 991px) {
/* Your responsive CSS */
}
@media screen and (max-width: 767px) {
/* Your responsive CSS */
}
@media screen and (max-width: 479px) {
/* Your responsive CSS */
}
3

Hey Andy,

I’m wondering if you ever figured out a resolution for this? I’m running into the exact same issue when building a site. I can’t get the hero section to look right on mobile landscape because my iPhone 11 send it into tablet view. I’ve been using 100vh for the hero section.

I would love to chat more about this with you (I’m intermediate with Webflow and I’m seriously stumped on this one).

Thanks for any help!
Nick