What makes a design responsive?

Responsive design is not just a set of device widths. It means the interface remains usable as the viewport, font size, orientation and input method change. The layout should reflow rather than simply shrink.

img {
  max-width: 100%;
  height: auto;
}

.wrap {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

The moving parts

• A viewport meta tag so mobile browsers use the device width
• Fluid containers and flexible images instead of fixed pixel widths
• Breakpoints chosen where content becomes hard to read or use
• Touch targets large enough for fingers, with visible focus states
• Text that remains readable when the user zooms or changes the default font size

Avoid hiding important content on small screens. Reorder, stack or simplify it instead. Responsive design is also about performance: a smaller viewport often means a slower network, so avoid shipping desktop-sized assets unconditionally.