Responsive Design for Phones

Most visitors are on phones

More than half of web traffic comes from phones. A responsive site adapts its layout to the screen size.

Step 1: the viewport tag

Every page needs this in its <head>, or phones will zoom out and show a tiny desktop page:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Step 2: flexible layouts

Use percentages, max-width, Flexbox wrap and Grid instead of fixed pixel widths:

img { max-width: 100%; }           /* images never overflow */
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

Step 3: media queries

A media query applies CSS only when a condition is true, like "the screen is narrow":

.cards { display: flex; gap: 12px; }

@media (max-width: 600px) {
  .cards { flex-direction: column; }
}

Mobile-first

Professionals usually write styles for phones first, then add rules for bigger screens with min-width:

.grid { display: grid; gap: 16px; }               /* phones: one column */
@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr 1fr; }        /* tablets: two */
}
@media (min-width: 1100px) {
  .grid { grid-template-columns: 1fr 1fr 1fr; }    /* laptops: three */
}

Test it yourself: in your browser's DevTools, click the phone/tablet icon to preview your page at any screen size. (This site was tested on 12 devices the same way.)