Website Landscape Mode Errors

I’m working on a site for client that’s a photographer, and I’m ready to launch but there are some bugs that I cannot figure out. On the websites homepage there’s an image of a camera. When the site is loaded with a mobile device in portrait mode it looks fine, but when the phone is turned from portrait -> landscape -> then back to portrait, the camera image becomes distorted. Im not sure what to do to fix this issue. Please respond asap!

Here is my site Read-Only: View Project

Hi @johnadegbuji1 and let me first start off by welcoming you to this grand community. Here you will find answers and sometimes more questions, but we are here to help you in any way we can or able to.

So lets get to your issue. First off, I like the landscape view. However, due to the fact that when you are moving between landscape and portrait on mobile devices you may have shrinkage in images. This is because the images are loaded once per view. So when you keep changing the view you will have to refresh the page eventually, due to the crop factor of different breakpoints.

This is not a Webflow issue, this is a normal everyday media-query change. Not sure if there is anything that can be specifically done other than maybe a note that lets users know to refresh their screen.

Hope that helps and Happy Designing,

Ah I see. Is there not any other solution? People tend to not read directions properly. I would hate for them to just switch back to portrait view and see a distorted site.

Not sure. Have to do more research on that! I’ll reach out to some other experts i know and let u know what i find out.

1 Like