Choose responsive breakpoints from the content

A breakpoint is a condition where responsive CSS changes. Choose it by watching when your content becomes cramped or leaves too much empty space, not by assuming a particular width means “tablet.”

Working example

<div class="cards">
  <article>
    <h2>HTML</h2>
    <p>Start with the structure.</p>
  </article>
  <article>
    <h2>CSS</h2>
    <p>Then arrange the content.</p>
  </article>
</div>

.cards {
  display: grid;
  gap: 1rem;
}
.cards article {
  padding: 1rem;
  background: #dbeafe;
}
@media (min-width: 40rem) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

The base layout has one column. The media query uses two when the preview viewport reaches 40rem. To observe both states, copy the document and resize its window or use the browser’s responsive view. The small embedded preview may stay below that threshold.

Test the intervals too

Check just below and above the breakpoint, then several widths between your planned sizes. Test long labels, zoom and real content. A layout that works only at a few screenshots is not robust.

Media-query rem units are based on the initial font size, not a custom root size set by your page. Frameworks choose their own defaults: a named utility breakpoint is not a universal browser standard.

Use a container query when a component should respond to its available container space. Use flex wrapping or intrinsic grid sizing when the layout can adapt without a breakpoint.

Sources

Reference 1 provide the technical details and current compatibility information.