design · PromptZap Team
Mobile-First Responsive Pass
Reviews your page breakpoint-by-breakpoint from 375px up, then rewrites the layout genuinely mobile-first instead of desktop-shrunk.
Prompt text
Review [component/page] for responsive design starting from a 375px mobile viewport, not desktop-down. Go breakpoint by breakpoint (375px → 768px → 1024px → 1440px) and tell me: - What breaks or looks cramped at each width - Where touch targets are under 44x44px - Where text wraps awkwardly or truncates important content - Which desktop-only decorative elements should be hidden/simplified on mobile rather than just shrunk - Whether the nav pattern (hamburger vs. full nav) switches at a sensible breakpoint Then rewrite the layout mobile-first: base styles target the smallest screen, and use min-width media queries (or Tailwind's default breakpoint prefixes) to progressively enhance upward. Don't use max-width queries to "fix" a desktop-first layout after the fact.