How are the large monitor and tablet landscape media queries coming?

Publishing help General
1

yay! also need a tablet landscape mode, if for nothing else then to be able to change from a visible navbar to a hamburger navbar, and other little tweaks in usability that are important to me.

2

We will start working on the large monitor media query later this month! I can’t wait either!

3

glad to hear it. I do hope that you reconsider adding a tablet landscape query as I want to be able to do different things when somebody is on a tablet, like switch to a hamburger menu, even though the query might be the same size. The screens certainly are not the same size.

RN

1 Like
4

Thanks for the feedback Richard. We’ll definitely consider it.

5

I’ve been thinking about it a bit more, and it would seem that media queries are not perfect since there are three parameters that need to be taken into account for any device:

  1. Dimension
  2. Aspect Ratio
  3. Pixel Density

Media queries only address one of those, I assume? That would be the problem, because my current 5 inch phone has the same resolution as my 27 inch monitor, but they are obviously very different sizes. I have no suggestion or solution, I’m just discussing :slight_smile:

RN

6

Just to add some clarity, media queries actually can take all of those into account …but for now webflow and most css grid systems only take into account device width since browsers are inherently built to stack and reflow vertically. But when building full screen web apps, you can do some pretty neat stuff with js and media queries but it is also tedious work, especially building for phone landscape.

Some examples:

@media screen and (max-width: 995px) , screen and (max-height: 700px) {  /* STYLES GO HERE */ }

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }
1 Like