CSS orientation Media Feature

What You’ll Learn

The orientation media feature detects whether the viewport is portrait (tall) or landscape (wide). Adapt layouts when users rotate phones or resize browser windows.

Introduction

When you hold a phone upright, the screen is in portrait orientation — height is greater than width. Rotate it sideways and you get landscape — width is greater than height.

The @media (orientation) feature lets CSS respond to that change instantly. It is one of the most practical media queries for mobile and tablet design.

Definition and Usage

Write @media (orientation: portrait) for tall viewports or @media (orientation: landscape) for wide viewports. Combine with min-width when you only want landscape rules on larger screens.

📝 Syntax

Use portrait or landscape inside an @media rule:

/* Viewport is taller than wide */
@media (orientation: portrait) {
  /* Portrait styles */
}

/* Viewport is wider than tall */
@media (orientation: landscape) {
  /* Landscape styles */
}

Accepted Values

• portrait — Viewport height is greater than width (phone held upright, tall browser window).
• landscape — Viewport width is greater than height (phone rotated sideways, wide browser window).

Portrait vs Landscape

orientation vs aspect-ratio

Basic Example

@media (orientation: portrait) {
  body {
    background-color: #dbeafe;
  }
}

@media (orientation: landscape) {
  body {
    background-color: #dcfce7;
  }
}

Default Value

There is no CSS default. Orientation is determined by the current viewport dimensions. Your base styles apply until a matching query overrides them.

Syntax Rules

• Only two values: portrait and landscape.
• Combine with width: @media (orientation: landscape) and (min-width: 48rem).
• Square viewports (equal width and height) match neither portrait nor landscape per spec.
• Prefer min-width breakpoints for general responsive design; use orientation for rotation-specific tweaks.
• Test by resizing the browser or rotating a real device.

Related Topics

• aspect-ratio — specific viewport proportions
• height — viewport height queries
• any-pointer — touch vs mouse detection

When to Use orientation

Reach for orientation when viewport shape drives the layout:

• Mobile rotation — Switch between stacked and side-by-side layouts.
• Video players — Expand to full width in landscape mode.
• Navigation bars — Vertical nav in portrait, horizontal in landscape.
• Hero sections — Tall image in portrait, wide banner in landscape.
• Keyboard open on phones — Landscape often means less vertical space despite wide width.

Examples Gallery

Practice orientation with background themes, flexible layouts, navigation changes, and combined width queries.

@media (orientation: portrait) {
  body {
    background-color: #dbeafe;
  }
}

@media (orientation: landscape) {
  body {
    background-color: #dcfce7;
  }
}

.layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (orientation: landscape) {
  .layout {
    flex-direction: row;
  }
  .layout > * {
    flex: 1;
  }
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #1e293b;
}

.nav a {
  color: #f8fafc;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

@media (orientation: landscape) {
  .nav {
    flex-direction: row;
    justify-content: center;
  }
}

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (orientation: landscape) and (min-width: 40rem) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

💬 Usage Tips

• Combine with min-width — Landscape alone is not enough for desktop-sized layouts.
• Test real devices — Rotate phones and tablets to verify navigation and spacing.
• Consider keyboard height — Mobile landscape often has very little vertical space.
• Use aspect-ratio for ratios — When you need 16:9 specifically, not just “wide.”
• Mobile-first defaults — Portrait styles often match your base mobile layout.

⚠️ Common Pitfalls

• Landscape ≠ desktop — A rotated phone is landscape but still small.
• Replacing min-width entirely — Use width breakpoints for general responsive design.
• Square viewports — Equal width and height match neither value.
• Over-rotating layouts — Avoid jarring layout shifts; keep content consistent.
• Ignoring portrait keyboard — Virtual keyboard reduces height in portrait too.

♿ Accessibility

• Content in both orientations — Never hide essential content in one orientation.
• Touch targets — Keep buttons at least 44×44px in all orientations.
• Reflow — Support zoom and text scaling without horizontal scroll.
• Focus order — Tab order should make sense in portrait and landscape.
• Reduced motion — Avoid disorienting layout animations on rotation.

💡 Best Practices