Google Phones Not Recognizing Landscape Query

So I have a full screen mobile nav menu that works fantastic in both tablet and mobile (vertical) orientations. However it’s too tall for landscape, so I changed it up only to discover that my pixel 2 isn’t changing when rotating to landscape. I’m assuming this is because of discrepancy between the webflow breakpoint and the pixel’s resolution. Is there an easy workaround for this? Or am I going to have to go in and custom code some more breakpoints?

Can you provide read-only link and published site link?

Unfortunately this problem is not site specific. It happens across the board. Webflow does not seem to recognize that my phone is in landscape mode regardless of the project I’m working on. None of my coworkers have a pixel either so I cannot test it on another device. It does not work on landscape through desktop inspect mode either. I’ve noticed the same thing about the Iphone X landscape orientation as well.

Here’s a dummy link. I’ve set the background to change to red on mobile landscape. Try using chrome’s inspect tool, select either the pixel 2 xl or the iphone X and change orientation to landscape. The background will not change.

Webflow has nothing to do with this really. It only says to use some styles on a certain resolution. Both pixel xl and iphone x are outside of that width (wider) when in landscape, that is all. The current situation on the hardware market is such that it is nearly impossible to accommodate every device.

So then answer is, yes I’m going to have to add custom breakpoints. Thanks!

Well, depending on the situation. Adding custom breakpoint is a lot of work (probably, again, depending on your layout) so it may be more efficient to slightly modify your layout in such a way that it looks good in your instance of horizontal mobile orientation.

Well my primary problem is that I have a full screen, vertically oriented mobile nav menu. I need to split the menu up so that it can be displayed horizontally for those who turn their phones sideways.

Why not making two column menu the default and then switch to one column on smaller breakpoint? Or use flex and set minimum width to your menu items so that it automatically becomes one column on narrow viewports?

My iPad and Mobile menus are similar, so I’m going to have to find a sweet spot in between those.

This problem is still occurring on Pixel and some other Android devices. I have multiple Pixel devices and Iphones of various sizes and my landscape menus work perfectly on all sized devices but not pixel devices. On pixel devices my mobile menus are unreadable and unusable in the landscape but work and view perfectly on all other devices.

Any solutions for this issue today?