Mobile Landscape media query not updating correctly

The media tag @media (max-width: 767px) used for Mobile Landscape does not work properly when resizing the browser. Once it reaches the mobile portrait size it still shows the landscape content.

Adding @media (max-width: 767px) and (orientation:landscape) fixes the issue.

Issue present here - http://mvportfolio.webflow.io . The “rotate to portrait” div does not go away when you resize the browser to minimum, regardless of height

This seems to be a little odd, can you share your read only link please?

Sure, here it is
https://preview.webflow.com/preview/mvportfolio?utm_source=mvportfolio&preview=8fbd002d8d8a284801ef170de8dffaeb

Forgot to mention this issue is present in Safari, on chrome seems to be working fine.

Hi @MihaiV,

Thank you so much for reaching out about your media query not working as expected.

We were able to take a look at your project in Safari, and noted something similar.

This may be due to the Safari window only being able to resize to 504px wide:
CloudApp

The next breakpoint will occur at 479px:
CloudApp

We were able to test your project within a device that is smaller than 479px in Browserstack, and noted that the breakpoint worked as expected:
CloudApp

Hopefully, this was helpful. Feel free to let us know if this is helpful, or if you have any additional questions. :bowing_man:

Oh wow, I would have never thought about something like that! Thank you very much for your help, really appreciate it!

1 Like

Oh, glad we could help! :webflow_heart:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.