@media.orientation

The orientation CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media).

Syntax

The orientation feature is specified as a keyword value chosen from the list below.

Keyword values

portrait

The viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.

landscape

The viewport is in a landscape orientation, i.e., the width is greater than the height.

Example

HTML

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

CSS

body {
  display: flex;
}

div {
  background: yellow;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

Result

Specifications

Browser compatibilityUpdate compatibility data on GitHub