SayUI
← Library→ Turn this into a prompt
Layout & grid

Responsive Breakpoints

Viewport-width tiers that switch layout rules—write mobile-first, enhance upward.

Also known as media queries · responsive tiers · sm md lg

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Responsive Breakpoints".

Write styles mobile-first: base rules for the narrow viewport, then min-width media queries at 640/768/1024px. Pick breakpoints where content degrades (line length over ~75ch, orphaned whitespace), not from a device catalog. Component-level adaptation uses container queries. Never mix min- and max-width directions in one component.

Anatomy:
- breakpoint: Common steps: 640 / 768 / 1024 / 1280 (Tailwind’s de facto set).
- mobile-first: Base styles target the narrow view; min-width steps enhance.
- content breakpoint: Advanced: break where the content starts looking bad, not from a device list.

Preferred API / pattern: `Tailwind sm:/md:/lg: / useMediaQuery hooks`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Mixing min-width and max-width in one component
  • ○Avoid: Breakpoint names tied to device models
  • ○Avoid: Only testing just above and below a tier
  • ○Avoid: JS window-width switches that disagree with CSS breakpoints

In plain wordsHow people search for it

“how wide is tablet vs phone in this design system”“what sm md lg actually mean in the CSS”“that point where the layout flips when I drag the window”

AnatomyOpen for part names

breakpoint
Common steps: 640 / 768 / 1024 / 1280 (Tailwind’s de facto set).
mobile-first
Base styles target the narrow view; min-width steps enhance.
content breakpoint
Advanced: break where the content starts looking bad, not from a device list.

How to write itOpen for stack patterns

Web (HTML/CSS)@media (min-width: 768px)
React + Tailwind + shadcn/uiTailwind sm:/md:/lg: / useMediaQuery hooks
SwiftUIhorizontalSizeClass / containerRelativeFrame
Ant DesignCol xs/sm/md/lg/xl props / Grid.useBreakpoint()

Notes

Stop memorizing “iPad is 768.” Drag the window from narrow to wide and mark where lines get too long, whitespace collapses, or columns crush—those are your breakpoints. Mobile-first min-width is the only sane direction; mixing max-width wars creates cascade bugs. Component-level adaptation belongs to container queries, not viewport media queries.

Common mistakesHumans and models trip here

  • Mixing min-width and max-width in one component: ranges fight; one change breaks both ends.
  • Breakpoint names tied to device models: foldables and split windows already broke that map.
  • Only testing just above and below a tier: 769px fine does not mean 900px looks good—drag through the middle.
  • JS window-width switches that disagree with CSS breakpoints: use matchMedia with the same values.

More failure symptoms on AI broke it.

Related patterns

Grid SystemSplit the page into N equal columns (usually 12) and size blocks by how many columns they span.Container QueriesLet a component adapt to its container’s width—not the viewport—so reusable UI actually reuses.Truncation / EllipsisClipping overflow text with an ellipsis so layouts stay intact.

Spotted a wrong name or missing pattern?

Message on X