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
Thank you so much, that did the job!
