# Layout adapts when device is rotated to landscape

- **Pattern:** `ab-001924` (`mobile-responsiveness.layout.landscape-support`)
- **Severity:** info
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001924
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001924)

## Why it matters

A hero section with `height: 100vh` becomes roughly 350px tall when the user rotates their phone to landscape. Headline, subhead, and CTA button get crammed into that tiny vertical window — often only the headline remains visible, with the CTA below the fold. `100vh` also misbehaves on iOS Safari because mobile browser chrome shrinks and grows dynamically. `100dvh` (dynamic viewport height) is the modern replacement that handles both cases correctly.

## Severity rationale

Info because landscape use on phones is a minority of sessions, but the fix is cheap and worth doing.

## Remediation

Replace `height: 100vh` with `min-height: 100dvh` so content can grow past the viewport when necessary, and add a landscape media query to reduce padding on short viewports. Update hero and full-screen overlay components in `src/components/`.

```css
.hero { min-height: 100dvh; }
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: auto; padding: 3rem 0; }
}
```

## Detection

- **ID:** `landscape-support`
- **Severity:** `info`
- **What to look for:** Check for landscape-specific media queries (`@media (orientation: landscape)` or `@media (max-height: 500px)`) in CSS. In Tailwind, look for `landscape:` variant usage. Examine whether fixed-height elements (hero sections with `height: 100vh`, modals, full-screen overlays) would become unusably cramped in landscape orientation on phones where viewport height drops to 300-500px.
- **Pass criteria:** Count all `height: 100vh` and `h-screen` declarations in the project. For each, classify as "content element" (renders text/interactive content) or "background wrapper" (purely decorative). No more than 0 content elements may use `height: 100vh` without a landscape media query override or `min-height: 100dvh` alternative. Report even on pass: "Found X instances of height: 100vh/h-screen; Y are content elements, Z have landscape overrides."
- **Fail criteria:** At least 1 content element uses `height: 100vh` (or Tailwind `h-screen`) without a landscape media query override or `min-height: 100dvh` alternative — content becomes cramped at approximately 350px height in landscape on phones.

  Pass when: No `height: 100vh` usage found, OR `height: 100vh` is accompanied by landscape adjustments, OR `min-height: 100dvh` is used instead.

- **Skip (N/A) when:** Never — check for landscape media queries in the codebase. Full visual verification across device rotations requires live URL testing.
- **Detail on fail:** `"Hero section uses height: 100vh (or h-screen) with no landscape override — 1 of 3 content elements becomes approximately 350px tall in landscape on phones"`.
- **Remediation:**

  ```css
  .hero { min-height: 100dvh; /* dynamic viewport height */ }

  @media (orientation: landscape) and (max-height: 500px) {
    .hero { min-height: auto; padding: 3rem 0; }
  }
  ```

  In Tailwind:

  ```html
  <section class="min-h-screen landscape:min-h-0 landscape:py-12">
  ```

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001924