16

media query for browser size where width < height?

I tried

@media screen and (max-width: 700px) and (min-height: 700px) {

But that does not work. Please help.

Use Case:

  • if (width > height), I align items horizontally
  • if (width < height), I WANT TO align items vertically.
gaurav jain
  • 1,267
  • 8
  • 20
  • 36

1 Answers1

29

There's a special media query right for your needs.

The orientation media query allows us to target specific styles based on the current screen or device orientation. We have 2 properties; landscape and portrait which allow us to change a pages layout based on the browsers current orientation.

A browser or device determines the orientation by listening to the width and height of the window. If the height is larger than the width the window is in portrait mode. If the width is larger than the height it’s in landscape mode. 

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}
Andrey Mikhaylov - lolmaus
  • 23,107
  • 6
  • 84
  • 133
  • I know that "it really should work" ... that's why I was (& still I am) so frustrated & disappointed with the fact that it doesn't ... :( ... I opened a question here specifically for this: http://stackoverflow.com/questions/20199764/orientation-media-query-not-working-on-ipad-mini ... you can check it out if you want ;) – pesho hristov Nov 27 '13 at 09:24
  • Can you reproduce your problem on http://sassmeister.com and publish a link to it? – Andrey Mikhaylov - lolmaus Nov 27 '13 at 22:58
  • 2
    The reason for not working was that in the meta tag for the viewport there was the clause "height=device-height". Without it all is fine :) – pesho hristov Nov 28 '13 at 17:06