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 anoverflow:hidden
in the Tablet Portrait layout. -
I have changed that locked
Height : 100VH
toHeight: 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
Thank you