More than 60% of UK web traffic comes from mobile devices. If your WordPress site looks broken on mobile — text too small to read, images cut off, elements stacking in the wrong order, buttons too small to tap — you're losing more than half your visitors before they read a word.
Cause 1: Missing or incorrect viewport meta tag
The viewport meta tag tells mobile browsers how to scale your page. Without it, mobile browsers display your site at desktop width and zoom out — making everything tiny. It should appear in your site's <head> tag:
WordPress website redesign — mobile-first from the ground up →<meta name="viewport" content="width=device-width, initial-scale=1">
Most WordPress themes include this automatically. If yours doesn't, add it via your theme's header.php file or using a plugin like Insert Headers and Footers. If you're using a child theme, add it in the child theme's header.
Cause 2: Hardcoded pixel widths in CSS
If your theme or custom CSS contains fixed widths like width: 1200px or min-width: 800px on elements, those elements will overflow the screen on a mobile device. The fix is to replace fixed widths with max-width: 100% and use percentage-based or fluid widths. Inspect the broken element in Chrome DevTools (right-click → Inspect), look for the CSS causing the overflow, and change it to something responsive.
Cause 3: Images wider than their containers
Large images that aren't constrained to their container cause horizontal scrolling on mobile. Add this to your theme's CSS to prevent it:
img { max-width: 100%; height: auto; }This applies to images everywhere on your site. If only specific images are breaking, the image likely has inline width styles (width="1200" in the HTML) that override your CSS. Find the page in the WordPress editor and remove the hardcoded width attribute from the image.
Cause 4: Page builder mobile settings
If your site was built with Elementor, Divi or Beaver Builder, each of those builders has its own mobile settings that override your CSS. Common issues include columns that don't stack properly on mobile, text sizes that aren't reduced at smaller breakpoints, and elements set to "hide on mobile" that are actually hiding something important. Open the page builder editor, switch to mobile preview mode and check every section's mobile-specific settings.
Cause 5: A recently updated plugin changed your layout
Some plugins output inline CSS or add elements to your pages. A plugin update can change that output and break your layout. To diagnose this, deactivate plugins one by one (starting with any recently updated ones) and check the mobile display after each deactivation. When the problem disappears, that's your culprit. Report it to the plugin's support forum or find an alternative.
How to test your mobile layout properly
Don't rely solely on resizing your desktop browser window — it doesn't perfectly replicate how mobile browsers render pages. Use:
- →Chrome DevTools device toolbar (press F12, then the toggle device icon) — simulates multiple device sizes accurately
- →Google's Mobile-Friendly Test at search.google.com/test/mobile-friendly — shows what Google sees
- →An actual mobile device — always test on at least one real phone, ideally both Android and iPhone
- →BrowserStack's free mobile testing tool — renders your site on real device screenshots
ImportantMobile layout issues directly affect your Google rankings. Since 2019, Google has used mobile-first indexing — meaning it uses the mobile version of your site to determine your rankings for all devices. A broken mobile experience doesn't just cost you mobile visitors; it costs you desktop rankings too.