Streaming live at 10am (PST)

Mobile horizontal view disaster

Okay so I am designing my website and I optimized it for every screen ( including horizontal mobile ), but when I publish the design the horizontal mobile view is a complete mess, why is that and is there any way to fix it?

here is the read-only link : https://preview.webflow.com/preview/j4rvis-new-home?utm_medium=preview_link&utm_source=designer&utm_content=j4rvis-new-home&preview=95db5fd3e2156ea5984b7bd7995702df&mode=preview

Hey there!

At first glance I saw, that you are using vh as a height value for your hero section. The vh is a viewport value, meaning 100vh matches the actual full height of the device’s height (viewport).

When a mobile device is in landscape-mode, the height is usually too small for any “full section” of your website! Try using auto as a value, so your content inside the hero section takes as much space as it needs.

Here’s some more info:

Here’s a nice demo of the different value types in action:
https://bokand.github.io/demo/urlbarsize.html

Another downside of vh in mobile-land, in chrome the URL bar hides on scroll and slides down on scroll up. This messes with absolut positioning. Here’s more info for that too!

Hope this helps a bit :slight_smile:

1 Like

Thank you so much, that did the job!

1 Like