Definition

What Is a Breakpoint in Responsive Design?

A specific viewport width at which a website's layout changes to accommodate different screen sizes. Defined in CSS using media queries.

Related Terms

Responsive Design

Mobile First

Viewport

Above the Fold

Accessibility (A11y)

Example

A common breakpoint set at 768px causes a desktop three-column grid to collapse to a single-column mobile layout.

As of 2024, mobile devices account for approximately 60% of global web traffic, making breakpoint design for small screens a primary concern, not an afterthought — according to Statcounter GlobalStats.

Synonyms:

Media query breakpoint, Responsive threshold

Acronyms:

-

What it applies to

Every website built with responsive design — which should be every website. Breakpoints are defined in CSS and configured visually in design tools like Figma and Webflow.

How breakpoints work in CSS

  • Breakpoints are defined using CSS media queries: @media (max-width: 768px) { ... }
  • Rules inside the media query only apply when the viewport matches that condition — overriding the default (desktop) styles.
  • Mobile-first approach uses min-width queries — start with mobile styles as the default, then add complexity at larger breakpoints.

Common breakpoint reference points

  • 320–480px: Small mobile
  • 481–768px: Large mobile / portrait tablet
  • 769–1024px: Landscape tablet / small laptop
  • 1025–1280px: Standard desktop
  • 1281px+: Large desktop

In Webflow

Webflow provides five built-in breakpoints accessible via the toolbar: Desktop (default), Tablet, Mobile Landscape, Mobile Portrait, and an optional Large Desktop. Styles set at a larger breakpoint cascade down to smaller ones unless overridden. Always design and test at every breakpoint before publishing.

Breakpoint: Common Questions Answered

Question

Answer