How to Make a Website Mobile-Friendly

The site looks fine on a laptop and shrinks to unreadable on a phone. These five changes fix the common causes, and the tests confirm it.

Add the viewport meta tag

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

Put it in the <head> of every page. Without it, phones render the page at roughly 980px wide and scale the whole thing down.

Let widths flow

Replace fixed pixel widths with percentages or a max-width, and stop images from overflowing:

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

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

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

The grid above stacks to one column on a phone and spreads out on wider screens without a media query. Wrap wide tables in a <div style="overflow-x: auto"> so the table scrolls inside itself rather than the whole page.

Make text readable without zooming

Body text should be 16px or larger. Set form inputs to 16px as well; iOS zooms in on any field with a smaller font when it receives focus.

body { font-size: 16px; line-height: 1.5; }
input, select, textarea { font-size: 16px; }

Size tap targets

Links and buttons need a touch area of at least 44 by 44 pixels, with space between them:

button, .button {
  min-height: 44px;
  padding: 12px 16px;
}

nav a {
  display: inline-block;
  padding: 12px;
}

Test in Chrome DevTools and on a phone

Open DevTools (F12), then press Ctrl + Shift + M (Cmd + Shift + M on a Mac) to toggle the device toolbar. Pick a phone from the dropdown and click through the site. Then load it on a real phone: on the same Wi-Fi, use the computer's local IP address and port in place of localhost.

Run PageSpeed Insights

Open pagespeed.web.dev, enter the page URL, and read the Mobile report. Fix anything it flags about the viewport, font sizes or touch targets, then rerun it.

Nothing wider than the screen. A horizontal scrollbar at phone width means one element is wider than the viewport: a fixed-width box, a long unbroken string, or an absolutely positioned element hanging off the edge. Inspect it in DevTools and give it a max-width: 100%, or add overflow-wrap: anywhere for long strings.