CSS Breakpoints for Responsive Design: How to Use Them

There is no universal set of screen widths every responsive design must target. Start with a flexible layout, then add a breakpoint where the content becomes cramped, too spread out, or otherwise needs a different arrangement. Use viewport media queries for page-wide changes and container queries when a reusable component should respond to the space its parent gives it.

A breakpoint is a condition threshold at which a media feature becomes true and the associated CSS applies. A minimum-width query, for example, can add columns once there is enough room. The values in this guide are examples; choose your own by checking the actual content and layout. web.dev recommends choosing breakpoints based on content rather than popular device sizes, which change over time.

1. Build a flexible layout before adding breakpoints

Begin with semantic content and layout rules that naturally use the space available. Flexbox and Grid can adapt across many widths without a media query for every screen. A breakpoint is useful when the current arrangement stops serving the content: navigation no longer fits, columns become too narrow, line lengths become uncomfortable, or a card’s image and text need to stack.

For example, begin with one column and add a second only when the cards have enough room:

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (width >= 42rem) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

42rem is illustrative. Resize the page and adjust the threshold until the transition happens where the content needs it. The minmax(0, 1fr) tracks help grid items shrink within their columns instead of overflowing because of long contents.

2. Use viewport media queries for page-level changes

A viewport media query responds to the browser’s viewport. It is a good fit when the overall page arrangement should change, such as adding a sidebar or moving a global navigation control.

/* Narrow layout is the default. */
.page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Add a sidebar when the page has enough room. */
@media (width >= 48rem) {
  .page {
    grid-template-columns: 16rem minmax(0, 1fr);
  }
}

The range syntax (width >= 48rem) expresses a minimum width. The equivalent familiar form is (min-width: 48rem). A maximum-width condition looks like (max-width: 48rem); range syntax can also express bounded ranges, for example (width >= 40rem) and (width < 70rem). Use the form supported by the browsers in your project.

Mobile-first CSS puts the narrow arrangement in the base rules and adds wider arrangements as room permits. This keeps the default usable at narrow widths and avoids relying on a desktop layout that must be undone. It is a workflow, not a requirement to use a particular breakpoint.

3. Use container queries for reusable components

A viewport query cannot tell whether a component has enough room inside its own parent. A card may sit in a narrow sidebar on a wide screen, or in a wide main column on a smaller one. A container query lets the component respond to its containing block instead.

.card-list {
  container-type: inline-size;
}

.card {
  display: block;
}

@container (width >= 32rem) {
  .card {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 1rem;
  }
}

The element with container-type: inline-size establishes the query container. The card switches to a side-by-side layout only when that container is wide enough. As with viewport thresholds, 32rem is an example to tune against the component’s actual content.

Question	Use
Should the whole page change with available window width?	Viewport media query (`@media`)
Should a reusable component change with its parent’s width?	Container query (`@container`)
Can flexible Grid, Flexbox, wrapping, or sizing handle the change already?	Prefer the flexible layout; add a query only when a distinct change is needed.

4. Choose breakpoint units and conditions

Choose the condition that reflects what drives the layout. Width is common, but media queries can also test height, orientation, resolution, aspect ratio, pointer and hover capabilities, and user preferences. Conditions can be combined with and; comma-separated query lists express alternatives.

/* Two conditions must both match. */
@media (width >= 48rem) and (orientation: landscape) {
  .toolbar {
    position: sticky;
  }
}

/* Either preference can select a light surface. */
@media (prefers-color-scheme: light), (prefers-contrast: more) {
  .panel {
    border-color: #555;
  }
}

/* Honor a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .animated {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
  }
}

Use pixel units when the constraint is tied to fixed-size, image-driven content. For text-centered layouts, a relative text unit such as em or ch may better reflect readable line length. web.dev illustrates a 50em threshold for line length; it is an example, not a universal standard. Relative units also avoid encoding a device model into the query.

5. Make the viewport match the device width

Include this declaration in the document head:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without an appropriate viewport declaration, some mobile browsers use a wider virtual layout viewport, so narrow-width media queries may not match as expected. See MDN’s viewport meta element reference.

6. A practical breakpoint workflow

List the content and its relationships. Identify navigation, columns, cards, forms, and long text before picking widths.
Write a flexible narrow layout. Use fluid widths, wrapping, Grid, and Flexbox so the page works without a device-specific rule.
Resize continuously. Check the layout between common device presets too; problems can happen at intermediate widths.
Mark the point where the content breaks down. Look for clipping, awkward wrapping, unreadable line length, or controls that become hard to use.
Add the smallest useful rule. Change only the elements that need a different arrangement.
Check nearby widths and zoom. Verify just below and above each threshold, and check that text can still be enlarged.

Do not set text size using viewport units alone. MDN warns that this can make text zoom less effective for users. Use responsive type scales with a readable minimum and maximum, and let users zoom.

7. Test responsive layouts efficiently

Use browser responsive design tools to vary width and height gradually, not only by selecting a named phone or tablet.
Check the page at each breakpoint and immediately on either side of it.
Inspect keyboard focus, navigation, forms, sticky controls, long words, images, and translated or user-generated text.
Test portrait and landscape where orientation affects the design, and test reduced motion and color preferences if the page responds to them.
Use real devices for touch behavior and device-specific issues that viewport emulation cannot fully represent.

For a visual record across chosen viewport sizes, a screenshot can help compare changes during review. ScreenshotNeo is a website screenshot API and MCP server from ScreenshotNeo; its API can capture pages at a chosen viewport. See the ScreenshotNeo API documentation.

8. Troubleshooting

Symptom	Likely cause	Fix
A mobile layout behaves as if the viewport is wide	The viewport meta element is missing or configured incorrectly.	Add `<meta name="viewport" content="width=device-width, initial-scale=1">` and reload the page.
A breakpoint triggers too early or too late	The threshold was chosen from a device list instead of the content, or the wrong container is being considered.	Resize around the failure point and move the threshold to where the layout actually needs to change. For component-local behavior, use a container query.
A grid column refuses to shrink	Intrinsic minimum sizing or a long unbreakable item may be forcing the track wider.	Try `minmax(0, 1fr)` for the flexible track, and allow long content to wrap where appropriate.
A container query never matches	No ancestor establishes the relevant query container, or the queried size condition is not met.	Apply `container-type: inline-size` to the intended parent and inspect the container width, not just the viewport width.
A layout works at named presets but breaks between them	Testing only device presets missed intermediate widths.	Resize continuously and test just below and above every breakpoint.
Text becomes tiny or cannot be enlarged comfortably	Font size may rely on viewport units alone.	Use relative text sizing with sensible bounds and verify browser zoom and text enlargement.

9. Performance, reliability, and cost

CSS media and container queries are browser layout rules; they do not require a screenshot service or network request. Keep the stylesheet understandable by adding a breakpoint only for a real layout change. Flexible layout reduces the number of special cases to maintain. For visual review, capture the same page at fixed viewport settings and compare like with like; dynamic content can otherwise make screenshots differ between runs.

Browser screenshots show a page at a particular viewport and state. They do not establish that every physical device, input method, or assistive technology behaves correctly. Combine visual checks with semantic markup, keyboard testing, and real-device checks appropriate to the site.

Or skip the browser setup

Use ScreenshotNeo’s one-call API to capture a page while documenting or reviewing responsive layouts. The request below captures a page; select dimensions and other capture options using the API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

ScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers say the page verdict and whether the request was billed. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

FAQ

Do I need a breakpoint for every phone, tablet, and desktop size?

No. Use flexible layout across widths and add a breakpoint only when the content needs a different arrangement.

Should I use `min-width` or `max-width`?

Either can work. A mobile-first stylesheet commonly uses minimum-width queries to add wider layouts. Choose the direction that keeps the rules simplest for your design.

Can media queries test more than width?

Yes. They can test characteristics such as orientation, resolution, pointer and hover capabilities, and user preferences.

When should I use a container query instead of a media query?

Use a container query when the component should adapt to its own allocated space, independently of the viewport width.