# No fixed-width containers that exceed mobile viewport

- **Pattern:** `ab-001915` (`mobile-responsiveness.viewport.no-fixed-width`)
- **Severity:** critical
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001915
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001915)

## Why it matters

A wrapper element with `width: 1200px` and no `max-width` forces the document to be wider than any phone viewport. The browser shows a horizontal scrollbar, content spills off-screen, and users must swipe sideways to read anything. Buttons and forms placed on the right edge become unreachable without scrolling. This is one of the most common causes of a failed mobile render — and it persists even when the viewport meta tag is correctly configured.

## Severity rationale

Critical because even one uncontrolled fixed-width container causes horizontal overflow that breaks every page it appears on.

## Remediation

Replace fixed widths with `max-width` + `width: 100%`, or use CSS `min()` to combine both constraints. In Tailwind, pair `max-w-7xl` or similar with `w-full` and `mx-auto` on the wrapper.

```css
.wrapper { max-width: 1200px; width: 100%; margin: 0 auto; }
```

Audit every layout file in `app/` and `components/layout/` for hardcoded pixel widths above 640px.

## Detection

- **ID:** `no-fixed-width`
- **Severity:** `critical`
- **What to look for:** Search layout and page components for fixed pixel widths applied to containers that are intended to fill the viewport. Look for inline styles like `width: 800px`, Tailwind classes like `w-[900px]`, or CSS rules like `width: 1200px` on wrapper elements. Distinguish between fixed-width containers with a `max-width` + centering pattern (fine) versus those that force the page to be wider than the viewport.
- **Pass criteria:** Count all layout and page container elements that declare a fixed pixel width. For each container with a fixed width above 640px, verify it is accompanied by a `max-width` constraint or percentage-based alternative. Report: "X containers checked; 0 of X use uncontrolled fixed widths above 640px." Do NOT pass when any container has a fixed width exceeding 640px without a `max-width`, percentage, or `min()` constraint.

  Pass patterns: `max-width: 1200px` with `width: 100%`; `width: min(1200px, 100%)`; `max-width: 80rem` with no fixed width; Tailwind `max-w-7xl w-full`.

- **Fail criteria:** Any layout container uses a fixed width exceeding 640px without `max-width` constraints, causing the page content to be wider than the viewport on mobile. At least 1 uncontrolled fixed-width container is sufficient to fail.

  Fail patterns: `width: 1200px` without `max-width` or percentage constraint; `min-width: 1024px` forcing a minimum wider than mobile viewports; any fixed pixel width above 640px without a responsive constraint.
- **Skip (N/A) when:** Never — this applies to all web projects.
- **Detail on fail:** `"Layout wrapper in app/layout.tsx has fixed width of 1200px with no max-width constraint — 1 of 5 containers causes horizontal overflow on mobile"` or `"Hero section uses inline style width: 900px without responsive override"`.
- **Remediation:** Replace fixed widths with responsive patterns:

  ```css
  /* Instead of: */
  .wrapper { width: 1200px; }

  /* Use: */
  .wrapper { max-width: 1200px; width: 100%; }
  ```

  In Tailwind:

  ```html
  <!-- Instead of: -->
  <div class="w-[1200px]">

  <!-- Use: -->
  <div class="max-w-6xl w-full mx-auto">
  ```

---

Taxons: user-experience

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