CSS orientation Media Feature

Definition and Usage

The orientation media feature tests whether the viewport is taller than wide (portrait) or wider than tall (landscape).

Use it inside @media to change layout when users rotate a phone or resize the browser. It follows viewport size — not the physical device sensor.

CSS Syntax

One keyword per query. You can combine with other features, for example @media (orientation: landscape) and (min-width: 768px).

Feature Values

How to Use orientation

Write base styles, then override inside portrait and/or landscape queries.

1. Choose a default layout that works in the common case (often portrait on phones).
2. Add @media (orientation: landscape) { … } (and portrait if needed).
3. Change only what must adapt — direction, spacing, or image size.
4. Resize the window or rotate a device to verify both matches.

Live Preview

This page checks your viewport with matchMedia. Resize the window to flip the match. Sample boxes use real @media (orientation) rules.

CSS Examples

Resize the browser (or the Try It pane) to see each query match. Use Try It Yourself for a live editor.

<style>
  .box {
    padding: 1rem;
    background: #e2e8f0;
  }

  @media (orientation: portrait) {
    .box { background: #dbeafe; }
  }
</style>

<div class="box">Portrait styles when tall.</div>

<style>
  .box {
    padding: 1rem;
    background: #e2e8f0;
  }

  @media (orientation: landscape) {
    .box { background: #dcfce7; }
  }
</style>

<div class="box">Landscape styles when wide.</div>

<style>
  .row {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
  }

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

  .item {
    flex: 1;
    padding: 0.75rem;
    background: #2563eb;
    color: #fff;
    text-align: center;
    font-weight: 700;
  }
</style>

<div class="row">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Key Takeaways