Fixing a website that looks fine on a computer but not on a phone

When a website looks fine on a computer but bad on a phone, the cause is usually one of a handful of things, and the symptom tells you which. Tiny text that needs pinching means the site was never built to adapt to small screens. Sideways scrolling means one item is too wide. A dead menu means a broken script. Work out which you have, and you will know whether it is a quick fix or a sign the site needs rebuilding.

First, look at it properly

Before you diagnose, see what your customers see:

On your own phone, open the site in the normal browser (Safari or Chrome), not inside the Facebook app. Look at the home page and at two or three inner pages.
On a second phone, ideally the other kind (iPhone if you have Android, and the other way round).
On your computer, if you use Chrome: open the site, press F12 (or right-click and choose "Inspect"), then click the small icon of a phone and tablet at the top of the panel. The page redraws at phone size, and you can pick different phone models from a list at the top.

Write down exactly what goes wrong on which page. "The menu won't open on the services page on my iPhone" is fixable. "It looks bad" is not.

Symptom: everything is tiny and you have to pinch to read

Usual cause: the site was built at a fixed width for desktop screens, so the phone shows the whole desktop page shrunk down. Sites made before roughly the mid-2010s, and some built with older tools, work this way.

Fix: there is no small patch. The layout itself has to be rebuilt so it rearranges for narrow screens (designers call this "responsive"). If your whole site behaves like this, that is your answer: it needs a rebuild, and spending money on small fixes first is money lost.

Symptom: the page slides sideways

Usual cause: most of the page fits, but one element is wider than the screen and pushes everything over. The common culprits are a large photo with a fixed size, a table (price lists, opening hours), an embedded map or video, a long web address or email address in the text, or a row of buttons that will not wrap.

Fix: find the item. Scroll slowly down the page on your phone and watch where the sideways movement starts. Usually it is one block, and a designer can make it shrink or stack. If you edit the site yourself in a builder, check that block's settings for a width set in pixels and change it to fit the screen.

Usual cause: on phones, menus collapse into a button, often three short lines. If tapping it does nothing, the script behind it is broken, often after an update, a plugin conflict or a builder change. Sometimes the menu opens but hides behind other content.

Fix: usually a technical fix for whoever maintains the site. On WordPress, a recent plugin or theme update is a common cause. On builders like Wix, check the separate mobile view in the editor, where the menu can be hidden by accident.

Symptom: text sits on top of photos or overlaps other text

Usual cause: text was placed at a fixed spot on top of an image, which lines up on a wide screen but collides on a narrow one. Builders with drag-and-drop layouts are prone to this.

Fix: in the builder's mobile view, move the text below the image or make the image a background that crops. Better still, do not put important words, like your phone number or a headline, inside a photo at all.

Symptom: buttons and links are too small or too close

Usual cause: links sized for a mouse pointer. On a phone, a thumb hits the wrong one.

Fix: buttons should be big enough to tap comfortably and spaced apart. Footer links crowded in one line and small "Read more" links are common offenders. This is a design setting, usually quick to change.

Symptom: the phone number cannot be tapped

Usual cause: the number is plain text, part of an image, or inside a picture of your logo.

Fix: the number needs to be a call link, which makes the phone offer to dial it. Every builder has a way to do this; making your phone number tappable shows what it should look like. On a phone, this one fix is often worth more than any design change.

Symptom: a pop-up covers the screen

Usual cause: a newsletter or offer pop-up designed for desktop, with its close button off the edge of the phone screen.

Fix: turn it off on phones, or remove it. Customers who cannot close it leave.

Symptom: it is very slow on a phone

Usual cause: large photos, auto-playing video, sliders, and many plugins or tracking scripts.

Fix: shrink the photos before uploading and remove what nobody uses. Test at PageSpeed Insights, looking at the mobile result. Making images smaller explains how.

Symptom: a separate "m." site that is out of date

Some older sites have a second, cut-down site for phones at an address like m.yourcompany.com. Phones get sent there, and it often shows old hours, old prices or missing pages, because nobody remembers to update it. The fix is to retire it and have one site that works on every screen.

Patch or rebuild: how to decide

Patch if the site mostly adapts to phones and you have one or two specific problems, such as one wide table, one dead button or one pop-up.

Rebuild if the whole page shrinks instead of rearranging, if several symptoms appear together, if nobody can safely update the software, or if the person who built it is gone. Refresh or full redesign helps with the decision.

What to do this week

Open your site on two phones and note every problem by page.
Use Chrome's phone view on your computer to check pages you rarely visit.
Match each problem to a symptom above.
Tap your phone number on every page.
Run the mobile speed test.
Decide: a short list of patches, or a rebuild.

If it is a rebuild, you can see your site rebuilt first from the words and photos already on it, and check it on your own phone before you decide.