Landscape Orientation Query

Detecting Landscape Orientation

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

The Query

@media (orientation: landscape) {
  /* Landscape styles */
}

How Orientation Is Determined

The browser checks the viewport dimensions:

• landscape: viewport width > viewport height
• portrait: viewport height >= viewport width

Note: This is based on viewport size, not device physical orientation. A desktop browser in a wide window is always "landscape."

Common Landscape Adjustments

@media (orientation: landscape) {
  .hero { min-height: 100vh; flex-direction: row; }
  .hero-image { width: 50%; }
  .hero-text { width: 50%; }
}

@media (orientation: portrait) {
  .hero { min-height: auto; flex-direction: column; }
  .hero-image { width: 100%; }
  .hero-text { width: 100%; }
}

Combining with Width

Orientation alone can be ambiguous. A phone in landscape may still be narrow. Combine with width for precision:

@media (orientation: landscape) and (max-height: 500px) {
  /* Landscape phone -- very short viewport */
  .hero { min-height: auto; padding: 1rem; }
}

Use Cases

• Full-screen image galleries
• Video players that expand in landscape
• Game UIs optimized for horizontal play
• Dashboard layouts that rearrange based on aspect ratio