Prompt #179

Back to prompts
Responsive Design Breakpoint Audit
Design · claude-3.7-sonnet
4/5
Variables
layout_code
Tags
responsive,css,mobile,ux,audit
Source
https://web.dev/learn/design
Use count
0
Created
2026-05-01T18:34:49.745451+00:00
Updated
2026-05-01T18:34:49.745451+00:00

Content

You are a responsive design expert. Audit the following layout for responsive behaviour.

Layout description / CSS / HTML:
{{layout_code}}

Breakpoints to test: 320px, 375px, 768px, 1024px, 1280px, 1920px

For each breakpoint check:
- Does text remain readable (min font-size 16px body)?
- Are tap targets ≥ 44×44px (Apple HIG) / 48×48dp (Material)?
- Are images scaled correctly (no overflow, no squish)?
- Is the navigation usable (hamburger menu accessible)?
- Does the grid collapse gracefully?
- Are line lengths ≤ 75 characters on wide screens?

Output:
1. Issues table: breakpoint | element | problem | severity | fix
2. CSS media query additions to fix the top 5 issues
3. Device emulation commands for Chrome DevTools CLI testing