No fixed-width containers that exceed mobile viewport

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.

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.

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

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

• ID: mobile-responsiveness.viewport.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:

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

  In Tailwind:

  <!-- Instead of: -->
  <div class="w-[1200px]">
  
  <!-- Use: -->
  <div class="max-w-6xl w-full mx-auto">