orientation

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

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.

In this example we have three boxes in the HTML, and use the orientation media feature to switch between a row layout (in landscape) and a column layout (in portrait).

The example output is embedded in an <iframe> whose height is greater than its width, so the boxes get a column layout.

HTML

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

CSS

body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

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

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

Result

This example has exactly the same code as the previous example: it has three boxes in the HTML, and uses the orientation media feature to switch between a row layout (in landscape) and a column layout (in portrait).

However, in this example, the example output is embedded in an <iframe> whose height is less than its width, so the boxes get a row layout.

HTML

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

CSS

body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

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

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