WordPress Site Not Displaying Correctly on Mobile

Reproduce it first. Open DevTools, switch to device emulation, and set the viewport to 375 × 812. Most mobile layout problems appear immediately at that width, and having the inspector open is what makes them fixable.

Symptom 1: the page scrolls sideways

One element is wider than the screen. Find it rather than guessing:

/* Temporarily outline everything to spot the overflow. */
* { outline: 1px solid red; }

Or in the console:

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

Common culprits and their fixes:

Do not fix this with overflow-x: hidden on the body. It hides the symptom, breaks sticky positioning in some browsers, and leaves the offending element there.

Symptom 2: text is tiny, and the whole page is zoomed out

The viewport meta tag is missing. It should be in the head:

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

Without it, mobile browsers render at a virtual desktop width and scale down. If it is missing, the theme is not outputting it — check that wp_head() is present in header.php, since a missing call removes this along with stylesheets and scripts, as CSS not loading describes.

Never add user-scalable=no or a maximum scale. Preventing zoom is an accessibility failure.

Symptom 3: the mobile menu does not open

Three moving parts: the hidden list, the toggle button, and the script joining them.

1. Check the console for a JavaScript error — one error anywhere stops the theme's navigation script.
2. Disable JavaScript combination and deferral in the performance plugin, then purge and retest. This is the most frequent cause.
3. Confirm the theme has a menu assigned to any mobile-specific location it registers.
4. Check z-index — the menu may be opening behind a sticky header.

The full sequence is in WordPress menu not showing.

Symptom 4: it looks right for you and wrong for visitors

Caching, in one of two forms:

• A separate mobile cache. Some hosts and plugins cache desktop and mobile variants separately; purging one leaves the other stale. Purge everything, per how to clear the WordPress cache.
• Your own browser cache. Test in a private window on the actual phone, not the browser you have been working in.

Symptom 5: only one section is broken

Almost always a page builder breakpoint. Builders keep per-device values, and a setting changed in desktop view does not apply to the mobile view when that value has been overridden there.

Check every breakpoint in the builder's responsive switcher — padding, font size, column width and alignment are all stored separately. For Elementor specifically, see Elementor changes not showing.

Symptom 6: tap targets are too small or too close

Buttons and links need enough size and spacing to hit reliably:

.button, nav a {
    min-height: 44px;
    padding: 0.75rem 1rem;
}

Adjacent links in a row of icons are the usual offenders. Search Console reports this under mobile usability, and it is worth fixing for real users rather than for the report.

Symptom 7: forms are awkward on a phone

• Use the right input types — email, tel, number — so the correct keyboard appears.
• Keep labels visible rather than relying on placeholders.
• Make sure the submit button is reachable without the keyboard covering it.
• Test an actual submission on a phone, including any captcha, per how to add reCAPTCHA to a form.

Test properly before calling it fixed

1. Emulate 375 px, 390 px and 414 px widths.
2. Test in landscape as well as portrait.
3. Check on a real iOS device and a real Android device — rendering genuinely differs.
4. Load over mobile data rather than office Wi-Fi.
5. Walk through a real task: find a page, read it, submit a form or complete a purchase.

The design principles behind getting this right the first time are in the responsive web design checklist.