Mobile Landscape mode on mobile looks crazy

Design help General
1

So I am working on this site trying to make it look good on mobile, it looks okay in portrait mode but when you look at it in landscape mode (from the mobile) the placements and alignment goes crazy to say the least.

At first I thought it was showing the desktop version on mobile landscape but after further inspection I actually don’t know what the mobile is taking information from because I can see elements which I don’t even have (see slider on product page, it has a grey background but I don’t have that anywhere else.)

How do I fix this? thanks

Here is my site Read-Only: https://preview.webflow.com/preview/qyre1?utm_medium=preview_link&utm_source=designer&utm_content=qyre1&preview=dbf76a4ec7752b9d2c09d42bc343fab7&mode=preview

and published https://qyre1.webflow.io/

2

Hey Daniel_Olsson- It looks like more of the styles on mobile landscape are currently being inherited from the desktop and tablet views, which is why they are looking funky. I would say best practice is to design from biggest screen down to smallest, that way your styles will cascade down. Style desktop, then tablet, then mobile landscape, then portrait. Portrait styling won’t affect mobile landscape styling. Hope that helps!

3

Thanks for the help Paul, I realized that the height for landscape mode on desktop isn’t really representative of the height on landscape mode on mobile. So the tall sections that were 100 VH or above definitely didn’t translate well into mobile landscape mode.

2 Likes