Landscape View looks good in Editor, but when viewed on phone the vertical margins mess up

My site looks fine from every screen as far as I can tell, except with mobile landscape. I have adjusted everything I can think of, but when I make a change, there is no change at all to the landscape view, no matter how extremely I change the value. Im attaching links.

Link to Read-only : Webflow - GilGal Gardens

I could really use some help if possible. Thing is driving me nuts.

Welcome to the community @B_D1!

Unfortunately I’m not able to reproduce the problem on my end, what device/browser are you using? It’s possible that you’re seeing a cached version if you’re not able to see even extreme updates, so publish the site again and try viewing the page in an incognito window.

If that doesn’t work, I’d recommend disabling the fixed background on mobile device as most devices don’t render this correctly without workarounds. That should fix the issue or (at the very least) make it easier for you to control the positioning of the background image :+1:

Thank you for trying to help.
I have made those changes and it doesn’t seem to change anything. I am so confused. I have not had this happen, and from my searches online I haven’t found anything showing that others have encountered it either. Its just weird that it only messes up with phone landscape view. Every other view is fine.

What device/browser are you seeing the issue on? Did you republish the site after making the changes in Webflow? Are you still seeing the problem when you visit the website in incognito mode?

Im viewing it on my Android with Chrome. It is doing it on an iPhone also. I republished and tried viewing it in incognito. I also cleared my phones cache and tried that too.

Hmmm, well unfortunately I’m not able to reproduce the issue on my end on your current staging site (gilgal-gardens.webflow.io)—both on my Android device using Chrome or within the Chrome DevTools on my laptop.

That said, the issue looks to be caused by the size of your heading font used in the hero section and/or the fixed height of the section itself (set to 60vh):

image

I’d recommend removing that fixed height—or moving that style to the min-height field—and potentially scaling down the heading text size a bit to see if that doesn’t improve the way it’s appearing on your devices.

If your referencing the live site on your custom domain (as opposed to the staging site) it’s possible the two may be using different styles, so feel free to include the live URL as well so I can take a peek there instead.

I’ve found that this viewport orientation/size is extremely uncommon for folks to use while browsing sites given the super limited vertical height, so slight issues here may not cause too much friction for your visitors.