Layout has breakpoints for phone and tablet
Why it matters
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.
Severity rationale
Medium because missing breakpoints degrade layout on whichever viewport class was skipped, but the site remains functional.
Remediation
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">
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Mobile Responsiveness Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
Taxons
History
- 2026-04-18·v1.0.0·Initial import from mobile-responsiveness·automated