Responsive design

I design a layout that adapts to the available space and the needs of the content: flexible widths, Flexbox/Grid, media queries and suitable images.

.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
img { max-width: 100%; height: auto; }

In the HTML I add meta name="viewport" with width=device-width, initial-scale=1.

In practice: I test narrow screens, long texts, zooming and keyboard navigation.

Pitfall: responsiveness isn't one “mobile” breakpoint. The layout shouldn't cut off content at in-between widths.