How to fix a site that breaks only on mobile

The site looks exactly right on a laptop, but open it on a phone and something is wrong — a menu that won't open, text running off the edge of the screen, images overlapping, or a layout that hasn't adjusted at all and just looks like a shrunken desktop page. This is a specific, recognisable pattern, and it points at a small number of causes rather than "the whole site is broken", which is worth remembering before assuming the worst.

Confirm it properly before diagnosing anything

Test on an actual mobile device if you can, rather than only narrowing a desktop browser window — a real phone browser handles touch input, viewport sizing and orientation differently enough that resizing a desktop window doesn't reliably reproduce the same conditions. If you don't have a second device handy, use your browser's built-in device emulation: in Chrome or Edge, open developer tools (F12) and click the small device icon in the toolbar to switch to a mobile view that simulates an actual phone's rendering behaviour, not just its width.

The usual causes, in order

1. A missing or incorrect viewport meta tag

Modern responsive design depends on a specific line in a page's HTML telling the browser how to handle scaling on a small screen:

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

Without it, mobile browsers render the page at a fixed desktop-like width and then shrink the whole thing down to fit the screen — which is exactly the "looks like a tiny desktop page" symptom. Check your theme's header file, or your page builder's settings, for this tag if it's missing entirely; most modern themes include it by default, so its absence usually means a heavily customised or very old theme.

2. CSS media queries that aren't matching correctly

Responsive layouts rely on media queries — CSS rules that only apply below or above a certain screen width. A rule with a typo in its width value, or a breakpoint set at a width that misses common phone screen sizes, can leave a layout stuck between its desktop and mobile styling, taking on neither correctly. Use developer tools' device emulation mode to inspect the page at the exact width your phone actually uses, and check the Styles panel to see which media query rules are, and aren't, being applied.

3. A page builder or theme setting hiding or showing the wrong content

Many modern page builders let you configure certain elements to appear only on desktop, or only on mobile — useful for genuinely different content per device, but easy to misconfigure so that something essential, like a navigation menu, is hidden on the wrong breakpoint entirely. Check the visibility settings on the specific element that's missing or behaving oddly on mobile.

4. A script that depends on a desktop-only interaction

A menu, dropdown or gallery built around a mouse hover event often simply doesn't work on a touchscreen, since there's no direct equivalent of "hovering" with a finger. If a menu opens fine on desktop but a phone's equivalent tap does nothing, this is very likely the cause — the underlying JavaScript needs a touch-specific version of the interaction, not just a CSS rule.

5. A plugin or script specifically for mobile

Some themes and plugins load an entirely separate mobile menu, mobile-optimised images, or a mobile-specific script bundle. If one of these has a bug, or failed to load correctly, the effect is confined entirely to mobile visitors, while the desktop experience — which doesn't use that code at all — remains completely unaffected. Check developer tools' Console tab on the mobile emulation view specifically; errors here often won't appear at all when testing the same page in normal desktop mode.

6. Images or fixed-width elements forcing horizontal scrolling

An image, table, or embedded element with a fixed pixel width wider than a phone's screen forces the whole page to become horizontally scrollable, which breaks the layout even if every other element is genuinely responsive. Check for content set with a fixed width in pixels rather than a percentage or a responsive unit, particularly in older content or manually embedded HTML.

Working through it systematically

1. Reproduce it in device emulation mode

   Open developer tools, switch to a mobile device view, and confirm you can see the same problem there that appears on an actual phone.

2. Check the Console tab for JavaScript errors specific to that view

   A script failing only under mobile emulation narrows the cause to code rather than styling.

3. Inspect the specific broken element

   Right-click it and choose Inspect to see exactly which CSS rules are being applied, and which media queries are and aren't matching at that width.

4. Test with plugins disabled one at a time

   If the culprit isn't obviously a CSS or viewport issue, disabling recently added plugins one at a time, retesting the mobile view after each, isolates a plugin-specific cause quickly.

If it's still unclear

Send support the exact page, the specific phone model or browser affected if you know it, and a screenshot of what's wrong alongside a screenshot of how it should look. Mobile-specific faults are often quicker to diagnose from an actual screenshot than from a written description, since the visual difference is usually the clearest signal of what's actually gone wrong.