Streaming live at 10am (PST)

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 - . 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

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:

The next breakpoint will occur at 479px:

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:

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.