Why does my site look wrong on phones?

How do I check my site on a phone?

1. Open the site on your own phone, in the phone’s usual browser. Visit the home page and your most-used pages.
2. Scroll slowly from top to bottom. Look for text running off the edge, a sideways scroll, overlapping parts, tiny text, and buttons too small to tap.
3. Open the menu (often three lines in a corner) and compare it with the menu on a computer. Note anything missing.
4. Turn the phone sideways and check again. Some faults show only one way.
5. Take screenshots of each problem. Cover any personal details before sharing.
6. Optional, on a computer: Chrome can imitate a phone. Open DevTools, then select Toggle device toolbar, and pick a phone from the Dimensions list. Google’s device mode guide calls this a “first-order approximation” and recommends checking on a real phone too.

Expected result: a short list of pages, what’s wrong on each, and which phones show it.

The short version

• Most phone problems come from something sized for a wide screen, or a mobile menu that wasn’t updated.
• Check on a real phone, screenshot what’s wrong, and send it with the page address.

Why does it matter?

Many visitors find a small business on a phone. A page they have to pinch and zoom, or a menu missing your services, sends them elsewhere. Google also mostly uses the mobile version of your site for search, as its mobile-first indexing guide explains. Content missing on mobile can be missing for Google too.

What usually causes it?

Web.dev’s responsive design basics lists the usual causes:

• No viewport setting. The phone draws the page at desktop width, so everything looks tiny. This is rare on modern themes but common on very old sites.
• Fixed widths. A section or column set to a fixed pixel width pushes content off the screen.
• Oversized images, tables or embeds. Anything wider than the screen makes the whole page scroll sideways.

Two more causes are easy to miss:

• Text alignment set for desktop. Text placed off to one side, or in a narrow column, looks lopsided on a phone. Page builders often have separate settings for desktop, tablet and phone.
• A separate mobile menu. Some themes use a different menu on phones. Add a page to the desktop menu only, and phone visitors never see it.

What are the common mistakes and edge cases?

• Checking only on a computer. Shrinking the browser window helps but misses some faults.
• Fixing the phone view and breaking desktop. In page builders, check you’re editing the phone setting, not the default.
• Text pasted from Word or email. It can carry fixed sizes that don’t shrink. Paste as plain text.
• An app or booking widget inside the page. Some outside tools don’t adapt to phones. Their maker may need to fix it.
• One phone only. Note the model and browser. A very old phone or browser may be the cause.

What if this didn’t work?

• It looks right on your phone but a customer says it’s wrong: ask for their phone model and a screenshot.
• The whole layout is broken on every screen: see something on my page looks broken.
• It’s slow on phones rather than wrong: see why is my website slow.
• The menu fix didn’t show up: clear your phone’s browser cache, or try a private tab.

How does E-3 handle this?

Send us the page address, your screenshots with personal details covered, and the phone and browser you used. A person at E-3 fixes the alignment or menu. If the mobile menu is separate, we bring it into line with the desktop menu. Bigger fixes are tested on a staging copy first, and website care includes daily backups.

To start, email support@e3help.me or fill in the Get support form. If your site has many phone problems, a redesign can be worth discussing.

Related questions

• How do I change my site’s menu or navigation?
• How do I change a photo or banner?
• Can you redesign my website?