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 :

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:

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