media query for browser size where width is less than height

Question

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.

Answer 1

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 */
}