How to make a website mobile friendly: 10 fixes that matter

To make a website mobile friendly, add a correct viewport meta tag, let layouts flow to the screen width instead of fixed pixel widths, use media queries to rearrange content on small screens, make text readable and buttons easy to tap, and serve images sized for phones. Then test on real mobile views. The ten fixes below cover what almost every non-mobile-friendly site gets wrong, in the order to tackle them.

1. Add the viewport meta tag

Without it, phones assume the page was built for a desktop and render it about 980 px wide, then shrink it. Text becomes tiny and users have to pinch-zoom. Put this in the <head> of every page:

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

Do not add user-scalable=no or maximum-scale=1; blocking zoom hurts people who need larger text. Details: the viewport meta tag explained.

2. Replace fixed widths with fluid ones

A width: 960px container cannot fit a 390 px screen. Use percentages, max-width and modern layout tools instead:

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

Flexbox with flex-wrap: wrap and CSS Grid with repeat(auto-fit, minmax(16rem, 1fr)) let columns wrap on their own, often without any media query.

3. Make images and embeds shrink

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

For embedded videos and maps, set aspect-ratio: 16 / 9; width: 100% so they scale without breaking the layout. This single rule removes many cases of sideways scrolling.

4. Rearrange content with media queries

Some layouts need to change, not just shrink: a sidebar moves below the content, a four-column footer becomes one column. Write the mobile layout first and add complexity for wider screens:

.layout { display: grid; gap: 2rem; }

@media (min-width: 64rem) {
  .layout { grid-template-columns: 3fr 1fr; }
}

Choosing widths is covered in responsive breakpoints, and the syntax in the CSS media queries guide. The mobile-first approach itself is explained in mobile-first design.

5. Use readable type

Set body text to at least 16 px (1rem in most browsers) with a line height around 1.5. Use rem units so text respects the user’s browser font setting. Keep line length comfortable on large screens with max-width: 65ch on text blocks. Headings can scale with the screen using clamp():

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

6. Make tap targets big and well spaced

Fingers are less precise than a mouse pointer. WCAG 2.2 sets a minimum target size of 24 × 24 CSS pixels; Apple’s and Google’s design guidelines recommend about 44–48 px for comfortable tapping. Give inline links and icon buttons enough padding and space between neighbours.

7. Build a navigation that works without hover

Hover menus do not exist on touch screens. On small screens, use a menu button that opens a list on tap, keep the number of top-level items small, and make sure nested items can be expanded by tap and by keyboard. Test that the menu closes when a link is chosen.

8. Fix forms for phones

• Use the right input types (email, tel, url, number) and inputmode, so phones show the matching keyboard.
• Add autocomplete attributes (name, email, street-address, cc-number) so autofill works.
• Keep input text at 16 px or more; iOS Safari zooms in on smaller inputs when they get focus.
• Stack labels above inputs on narrow screens and make the submit button full width.

9. Serve images sized for mobile

A 2400 px hero image is a large download on a phone. Use responsive images so the browser picks a suitable file:

<img src="hero-800.jpg"
     srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(min-width: 64rem) 50vw, 100vw"
     alt="Product dashboard on a phone">

Modern formats such as WebP and AVIF cut file size further. Add loading="lazy" to images below the first screen. Faster pages are covered in the mobile page speed test guide.

10. Remove mobile annoyances

Full-screen pop-ups on arrival, chat bubbles over the “Buy” button and sticky bars that take a quarter of the screen make a site feel hostile on a phone. Delay pop-ups, make them easy to close, and keep sticky elements small.

How to check your work

After each change, look at the page on a phone-sized screen. A fast way is a mobile view in desktop Chrome: DevTools device mode, or a one-click extension such as Mobile View Extension that reloads the tab with a real mobile user agent and lets you compare device sizes. Then run a Lighthouse mobile audit and, before launch, the mobile website testing checklist. Tools that replace Google’s old one-click test are listed in Mobile-Friendly Test alternatives.

Running WordPress? The same principles apply, but most fixes happen in the theme. See how to make a WordPress site mobile friendly.

Frequently asked questions

What is the quickest way to make an old website mobile friendly?

Add the viewport meta tag, set max-width: 100% on images and embeds, remove fixed widths from the main containers, and stack columns with one media query. That fixes most sideways scrolling and tiny text in an afternoon.

Do I need a separate mobile website?

No. A single responsive site that adapts to the screen is easier to maintain and is what Google recommends. Separate m. sites are a legacy approach.

How do I know if my website is mobile friendly?

Look at it on a phone-sized screen, run a Lighthouse audit in mobile mode, and check Google Search Console’s URL Inspection screenshot. Together they replace Google’s retired Mobile-Friendly Test.