How to make a responsive web application

Responsive design stopped being about breakpoints some years ago. Most of what makes an application work on a phone is now about components adapting to the space they are given rather than to the size of the window.

Ask the container, not the viewport

A card does not care how wide the window is. It cares how wide it is. A media query cannot express that, which is why the same card breaks when it moves from a full-width grid into a sidebar.

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

@container (min-width: 30rem) {
  .card { grid-template-columns: 8rem 1fr; }
}

The same result without container queries: an auto-fitting grid with a minimum track. No breakpoints at all, and it adapts to its parent.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: 1.5rem;
}

Fluid type without media queries

h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); }

Navigation that survives

Whatever the pattern: it must be operable by keyboard, close on Escape, return focus to the control that opened it, and trap focus while open.

Tables on a phone

• Let the table scroll inside its own container, never the page. A page that scrolls sideways feels broken.
• Below a threshold, render each row as a card with labelled fields.
• Or hide the columns that are not the point, and reveal them in a detail view.

Touch targets

Aim for 44px on anything a thumb has to hit. The 24px WCAG minimum exempts links inside a sentence, and that exemption is for prose — not for a row of icon buttons.