On your laptop the site looks exactly as it should. Then a customer sends you a screenshot from their phone: the menu has vanished, a heading is cut in half, the page slides sideways when they try to scroll, and the “Call now” button sits on top of the logo. You open it on your own phone and see the same mess.
This page is about that specific situation, where the desktop version is fine and the trouble appears only on phones or tablets. If the whole site has lost its styling on every screen, that is a different fault with different causes, and our page on fixing a WordPress layout that breaks on desktop as well is the better place to start. For the wider family of WordPress faults and how they relate to each other, see the WordPress errors and fixes guide.
Why a site can be fine on a laptop and broken on a phone
A WordPress theme does not send a separate site to phones. It sends the same HTML and the same stylesheets to every device, and the stylesheets contain rules that only apply below a certain screen width. Those rules are called media queries, and the widths where the layout changes are called breakpoints. Below a breakpoint, columns stack, the menu collapses into a toggle button, and font sizes shrink.
So when only the phone view is broken, the problem almost always sits in one of three places: the mobile rules themselves, something that stops those rules from applying, or a piece of content that is too rigid to fit a narrow screen. The desktop view never touches those rules, which is why it looks perfect.
There is one exception worth knowing about. Some caching setups, some older mobile plugins and some AMP configurations really do serve a different version of the page to phones. When that is the case, the phone can be showing an old or separately generated copy, and nothing you change on the desktop view will appear there until that copy is rebuilt.
What usually causes it
A page builder’s tablet and mobile settings
Elementor, Divi, WPBakery and most other builders let you set different padding, font sizes, column widths and visibility for each device. That is useful, and it is also the most common source of phone-only breakage. Someone sets a large negative margin or a fixed height on desktop, it inherits down to mobile, and nobody checks. Or a section is set to “hide on mobile” and the replacement section that was meant to show instead was never finished. If your site is built with Elementor, our page on Elementor problems we repair covers the editor side; for other builders there is a separate page on Divi, WPBakery and Beaver Builder faults.
Fixed widths that do not shrink
A table with eight columns, an embedded map or video with a set pixel width, a pricing grid built with hard-coded widths, an image inserted at its full size with a width attribute forced in custom CSS. Any one of these is wider than a phone screen, and it pushes the whole page sideways. The visitor sees a page that wobbles left and right as they scroll, or a white strip down the right-hand edge.
Optimisation settings that break the mobile menu
The mobile menu toggle depends on JavaScript. Caching and performance plugins, and some CDN settings, can combine, defer or delay scripts to make pages load faster. When that goes wrong, the hamburger icon appears but does nothing when tapped, or the menu opens behind the page content. On desktop the full menu is plain HTML and CSS, so it keeps working and hides the fault.
Stale mobile cache
Some caching plugins keep a separate cache for mobile visitors. You fix something, clear the main cache, check on desktop, and it looks right. Phones keep getting the old copy. Our post on edits that refuse to show up for visitors goes through each cache a WordPress site can have, and how to empty it.
Custom CSS added in the wrong place
A quick fix pasted into the Customizer’s Additional CSS box, with no media query around it, can look fine at full width and wreck the narrow layout. Theme updates can also change class names or breakpoints, so a rule that used to target the mobile header now targets nothing, or targets something else.
A missing viewport tag
Every responsive theme outputs a viewport meta tag in the page head, usually a meta tag named viewport with the value “width=device-width, initial-scale=1”. If a custom header, an old theme or a plugin removes it, phones render the page as though they were a desktop screen and shrink it down. Text becomes tiny and the mobile rules never fire. This is less common with current themes, but it still turns up on older custom builds.
Icons and fonts that fail to load
Sometimes the “broken” look is really missing icon fonts: the menu icon, the search icon or social icons show as empty squares. That can happen on every device, but people often notice it first on mobile because the menu icon is the only way in. Our post on fonts and icons showing as squares explains the usual causes.
What you can safely check yourself
None of these checks change anything on the site, so you can do them without a backup.
- Test on a real phone, on mobile data. Open the page in a private or incognito tab so you are not looking at a copy your browser saved earlier. Note which pages are affected. One page usually points to that page’s content; every page usually points to the theme, a plugin or caching.
- Compare with a desktop browser at phone width. In Chrome, open Developer Tools and switch on the device toolbar to preview common phone sizes. If the preview looks fine but real phones do not, a mobile-specific cache or a device-specific script is the likely suspect.
- Look for the sideways scroll. On the phone, try dragging the page left. If it moves, something on the page is wider than the screen. Scroll down slowly and watch where the white strip starts; that is often the element causing it.
- Write down what changed recently. A plugin or theme update, a new section on the home page, a new optimisation plugin, a CDN switched on. Phone-only breakage that appeared on a particular day almost always lines up with one of these.
- Take screenshots. One from the phone, with the phone model and browser if you know them. That is the single most useful thing you can send anyone who is going to fix it.
If you want to try fixes yourself, our general guide on making a website comfortable to use on phones covers text size, tap targets and menus. Before you start editing builder settings or CSS, take a full backup, or better, work on a staging copy, because mobile settings in builders are easy to change and surprisingly hard to put back.
How we approach a phone-only display fault
We start by reproducing it. That means real phones at more than one width, plus the browser preview, logged out, with caches bypassed. A fault we cannot reproduce gets nothing changed until we can, because guessing at mobile CSS tends to fix one screen size and break another.
Next we find which layer it comes from. Turning off minification or script deferral on a staging copy tells us quickly whether optimisation is involved. Inspecting the overflowing element shows whether it is content, a builder setting or theme CSS. Comparing the cached mobile page with a fresh one shows whether a stale copy is being served.
Then we fix it where it belongs. A table that is too wide gets wrapped so it scrolls inside its own box rather than pushing the page. A builder setting gets corrected at the device level it was set on, not overridden with more CSS on top. A mobile menu that stopped working gets its script excluded from deferral, rather than switching optimisation off for the whole site. Custom CSS moves into a child theme or the Customizer with proper media queries, so the next theme update does not undo it.
Finally we check the pages that matter most to your business on phones and tablets, held upright and turned sideways: home, the main service or product pages, the contact page and, for a store, cart and checkout. We tell you what was wrong, what we changed and whether anything is likely to come back, such as a builder add-on that keeps resetting its mobile settings.
When phone-only problems are a sign of something else
Most mobile display faults are plain layout bugs. Two situations deserve a closer look, though.
If phones are redirected to a different site, or see pop-ups and pages you did not create, while desktop visitors see your normal site, that is a well-known pattern in hacked WordPress sites. It is not a layout problem, and our hacked website repair page explains what that work involves.
If the mobile layout breaks again after every update, the cause is usually structural: a heavily modified theme with no child theme, or a builder add-on that is no longer maintained. Fixing the symptom each time costs more than sorting the cause once. Our WordPress bug fixing service covers the one-off repair, and we will tell you honestly if the better answer is a rebuild of the affected templates rather than another patch.
What to send us
Message us on WhatsApp or through the contact form with the website address, a screenshot from the phone, which pages are affected and anything that changed shortly before it started. If your site has a staging copy, mention it. Once we have looked, you hear what we think the cause is and when we are free to begin. Nothing gets changed until a fresh backup exists.