Layout has breakpoints for phone and tablet

Breakpoints are the contract between your layout and the device. With only a desktop layout, a phone at 375px renders the desktop grid crammed into a third of the intended width; with only a mobile layout, a desktop user sees a stacked single-column site wasting screen real estate. Covering at least the phone and tablet ranges gives you three distinct layouts — mobile base, tablet, desktop — which matches how real traffic is distributed.

Adopt mobile-first: the base styles target phones, then add sm: (640px) and md:/lg: (768/1024px) overrides in Tailwind, or equivalent media queries in CSS. Audit layout-affecting classes in app/layout.tsx and shared components.

<div class="flex flex-col sm:flex-row md:grid md:grid-cols-3">

• ID: mobile-responsiveness.layout.breakpoint-coverage

• Severity: medium

• What to look for: Check for media query breakpoints targeting phone-sized viewports (<=640px) and tablet-sized viewports (<=1024px). In Tailwind, look for sm:, md:, lg: responsive prefixes on layout-affecting classes. In plain CSS, look for @media rules at or near 640px and 1024px thresholds.

• Pass criteria: Count all distinct breakpoint values used in the project (media queries and Tailwind responsive prefixes). The project must use breakpoints targeting at least 2 viewport ranges: phone (<=640px or Tailwind sm:) and tablet (<=1024px or Tailwind md:/lg:). Report even on pass: "Breakpoints found: [list each breakpoint value and count of usages, e.g., 'sm: (23 usages), md: (15 usages), lg: (8 usages)']."

• Fail criteria: Fewer than 2 viewport ranges covered — no breakpoints at the phone size range, or breakpoints exist only for tablet and not phone.

• Skip (N/A) when: Never.

• Detail on fail: "Only 1 of 2 required viewport ranges covered — no media queries or Tailwind sm: prefixes found for phone-sized breakpoints".

• Remediation: Two breakpoints cover the essential range:

  @media (max-width: 640px) { /* phone */ }
  @media (min-width: 641px) and (max-width: 1024px) { /* tablet */ }
  

  In Tailwind (mobile-first — no prefix = mobile base):

  <div class="flex flex-col sm:flex-row md:grid md:grid-cols-3">