Page Background cropped on iPhone 11

Design help General
1

Hello,

I was testing my website (in progress) on a new iPhone 11 Pro max and when the phone is turned horizontally to landscape mobile, the background image is framed with a margin of color on the left and right side. Why is this happening?

Attached is a screenshot :

IMG_3755
IMG_37552688×1242 513 KB

Published Page : http://saras-fresh-project-29b7f0.webflow.io/category/prints-of-boston

Here is my site Read-Only: https://preview.webflow.com/preview/saras-fresh-project-29b7f0?utm_medium=preview_link&utm_source=designer&utm_content=saras-fresh-project-29b7f0&preview=fe3ebf1fe45ff37c9b9a87a8573ca881&pageId=5d865bce4a655769b950eb8a&itemId=5d865bce4a6557530150ebaf&mode=preview
([how to share your site Read-Only link][2])

Please advise.

Thank you,
Sara

2

Hello @Sarabeth,

That is expected behavior for the iPhone X and above. The color you see is the bg color of your body. Also, on iPhone X and above your landscape view is taken from your tablet breakpoints.

3

Thank you for your your reply @Pablo_Cortes

I will check out the breakpoints in tablet mode again to see if I can make an improvement upon the way the site looks on the iPhone X and above in landscape view. I am surprised that the pages do not fill that nice big screen edge to edge.

Kind regards ,
Sara

4

No problem @Sarabeth.

You are right, it is a waste of screen, even the apple website shows the lines on the sides on landscape mode. I’m sure there is probably a custom code trick to display full screen on big iPhone screens, but in my opinion it is not worth using since not that many people use landscape view. Anyway, good luck with your website.