Responsive foundations

01Start with flexible sizes

Let containers grow up to a sensible maximum instead of forcing a desktop width onto a small screen. Include the viewport meta tag in your document.

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container { width: min(100% - 32px, 1100px); margin-inline: auto; }
img { max-width: 100%; height: auto; }
</style>

02Add complexity when space allows

Start with a single column. Add a wider layout when the content has enough room, rather than targeting one particular phone model.

.cards { display: grid; gap: 16px; }
@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

03Test the awkward widths

Resize slowly, zoom in, try long titles and check navigation with a keyboard. A page should work between your chosen breakpoints too. Avoid hiding meaningful content just to make it fit.

04Try it yourself

Use Narrow / Wide preview below to see the columns adapt.

Further reading

Use the MDN learning guides and HTML Living Standard for deeper explanations and current browser guidance.