@media.orientation

The orientation CSS @media media feature can be used to apply styles based on 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 device is in a portrait orientation, i.e., the height is greater than or equal to the width.

landscape

The device 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 screen and (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

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

Result

Specifications

Browser compatibility