Fluid Sizing and Flexible Media

The best breakpoint is often no breakpoint. Before adding a media query, ask whether the layout can simply flex. max-width on a container, auto-fit on a grid, and flex-wrap on a row handle an enormous amount of responsiveness on their own.

clamp() for fluid type. clamp(min, preferred, max) picks the middle value but never lets it fall outside the bounds.

`

font-size: clamp(1.75rem, 5vw, 3rem);

`

That heading is 5% of the viewport width, but never smaller than 1.75rem and never larger than 3rem. It scales smoothly across every width instead of jumping at breakpoints.

✦ Images overflow unless you tell them not to

An image renders at its intrinsic size by default, so a 1600px wide photo will push a phone layout sideways and produce that horizontal scroll you see on badly built sites. The fix is two declarations applied once: max-width of 100% and height of auto, so it shrinks to fit while keeping its proportions.