Themes Intermediate 2 min read

How to Fix Mobile View Problems in WordPress

Most mobile problems are one element wider than the screen. DevTools will point at it in under a minute.

Updated 29 August 2026

Mobile issues feel vague — "it looks wrong on my phone" — but they nearly always come down to a handful of specific causes. Work through them in order and you will find yours quickly.

First, check the viewport meta tag

View source and look in the <head> for:

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

Without it, mobile browsers render the page at desktop width and shrink it, making everything tiny. Themes have included this for a decade, so if it is missing you are on a very old theme — and that is the finding, not a line to add.

Cause 1: Something is wider than the screen

This is the classic horizontal-scroll problem, and it is always one element. Find it with DevTools: open the mobile emulator, then run this in the console:

document.querySelectorAll('*').forEach(el => {
  if (el.offsetWidth > document.documentElement.clientWidth) console.log(el);
});

That logs every element wider than the viewport. Usual suspects: a table, an embedded iframe, a wide image without max-width, a preformatted code block, or an element with a fixed pixel width.

Fixes by type:

img, video { max-width: 100%; height: auto; }
table { display: block; overflow-x: auto; }
pre  { overflow-x: auto; }
iframe { max-width: 100%; }

Resist the temptation to put overflow-x: hidden on the body. It hides the symptom, and on iOS it can break scrolling entirely.

Almost always a JavaScript error. Open the console on a phone-sized viewport and look for a red error — the file named is usually the culprit.

Common causes: two plugins loading different jQuery versions, a minification plugin combining scripts in the wrong order, or a caching plugin's "defer JavaScript" setting breaking a script that expects to run early. Turn off JS minification and deferral temporarily; if the menu starts working, reintroduce them one at a time with exclusions.

Cause 3: Text is too small or taps miss

Body text should be at least 16px on mobile, and tap targets at least 44×44 pixels with space between them. Both are things PageSpeed Insights flags directly under "Mobile Usability", so you do not have to guess.

Cause 4: Layout shifts as the page loads

Content jumping around is nearly always images without dimensions, ads inserted without reserved space, or a web font swapping in late. Set explicit width and height on images, reserve a fixed height for ad slots, and use font-display: swap with a well-matched fallback stack.

Cause 5: You are looking at a cached desktop page

If your caching plugin has separate mobile caching enabled, or your CDN caches by device, a stale desktop page can be served to phones. Purge everything and retest. If the problem only appears for some visitors, this is very likely why.

Test properly

DevTools emulation is convenient but it is not a phone. Before you call it fixed:

Test on a real device, on mobile data rather than wi-fi.
Test both orientations.
Test iOS Safari specifically — it behaves differently from Chrome on several layout and scrolling details.
Test a page with a form and, if you run a shop, the checkout. Those are the pages where mobile problems cost money.

Common questions

Do I need a separate mobile theme?

No. Any modern responsive theme handles mobile from the same markup. Separate mobile themes and AMP add complexity and a second thing to keep in sync.

Why does it look fine in DevTools but wrong on my phone?

Emulation gets the size right but not the browser. iOS Safari differs from Chrome on scrolling, fixed positioning and viewport height in particular. Always confirm on a real device.