Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Breakpoints

The widths at which the layout changes, chosen from where the content breaks rather than from a device list.

Definition

A breakpoint is a viewport or container width at which layout rules change. The durable approach is to add a breakpoint where the content stops working, not where a popular device happens to be.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. A conventional set
  3. Practice
  4. In practice
  5. Continue from here

A conventional set

These are widely used defaults, useful as a shared vocabulary. Add or remove breakpoints based on where your content actually breaks.

NameMin widthTypical shift
sm640pxSmall elements move onto one line.
md768pxTwo-column layouts become viable.
lg1024pxPersistent navigation appears; three panes become possible.
xl1280pxWider content and larger media.
2xl1536pxMaximum container width reached; extra space becomes margin.

Practice

  • Work mobile first, using min-width queries. Base styles are the small layout and each breakpoint adds.
  • Test between breakpoints, not at them. Failures occur in the ranges, not at the boundaries.
  • Use em or rem in media queries so they respond to the user's font size setting.
  • Prefer container queries for components, and keep media queries for page-level structure.
  • Fewer breakpoints is better. Each one multiplies testing and review effort.

In practice

Content-driven breakpoints

Responsive design

A navigation bar that fits until 880px should break at 880px, not at 768px because that is the conventional tablet value. The content defines the boundary.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.