Over 60% of UK web traffic now comes from mobile devices. Google uses the mobile version of your site as the primary index. Visitors on phones expect tap targets they can hit with a thumb, text they can read without zooming, and pages that load on 4G without stalling. Responsive design — where a single site layout adapts intelligently to any screen — is the baseline. This guide covers how WordPress handles responsiveness, how to use the Block Editor's device preview, how Full Site Editor themes give fine-grained responsive control, and the common mobile issues that trip up even modern themes. It also covers the UK-specific performance dimensions: 4G coverage variability, typical device profiles, and how smartxhosting.uk's infrastructure supports fast mobile delivery.
Why responsive design matters for UK sites · What "responsive" actually means · WordPress themes and responsiveness · Previewing on different devices · Full Site Editor responsive features · How WordPress handles responsive images · Testing your site on mobile · Common mobile issues and fixes · Mobile-specific best practices · smartxhosting.uk and mobile performance · Frequently asked questions
Three reasons, all backed by data.
Ofcom's Online Nation report and Google's UK Consumer Insights both place mobile traffic share above 60% for most consumer-facing websites. For B2B sites the share is lower but still substantial. If your site does not work on a phone, you are failing the majority of your audience.
Since 2021 Google crawls and indexes sites primarily from the mobile viewpoint. The mobile version of your site is the version Google ranks, regardless of how polished the desktop version looks. A site broken on mobile loses search visibility across all devices.
Google's Mobile Usability report flags touch targets closer than 48 px apart, text under 16 px, and horizontal scrolling. Each is a conversion killer in its own right. A pristine-looking desktop site with cramped mobile controls converts at 20–40% of what it should.
Responsive design means a single site layout adapts automatically to the visitor's screen size. Not two separate sites (desktop and "m." mobile) — one set of HTML and CSS that rearranges itself:
Text reflows. Images resize. Navigation collapses. All without any action from the visitor and without a separate URL or codebase.
The opposite of responsive is fixed-width — a site laid out for a specific screen size (say 1024 px). On a narrower screen the user has to pinch-zoom and scroll horizontally. Fixed-width sites have been obsolete since 2013.
Almost every modern WordPress theme is responsive out of the box. Every official WordPress default (Twenty Twenty-One through Twenty Twenty-Five) is fully responsive. Most themes in the WordPress.org Theme Directory include responsive layouts.
Look for the word "responsive" in the theme description. In the WordPress dashboard, Appearance > Themes > Add New Theme, use the Feature Filter to filter by features. Preview any theme at different widths before installing.
Block themes (Twenty Twenty-Five, Kadence, Astra, Blocksy's block theme variant) are built with responsive behaviour as a core principle. Stacking, breakpoints, fluid typography and responsive spacing are built into the Full Site Editor.
If you inherit a non-responsive theme, switch to a modern block theme rather than trying to retrofit. Retrofit is usually more work than a migration.
The Block Editor includes a device preview feature.
Use this routinely before publishing, especially for pages with columns, large images, or complex layouts.
The editor preview is a rough approximation. It shows layout changes but may not accurately reflect:
For any serious check, test on a real phone or a browser's built-in device emulation.
If your theme supports the Full Site Editor, you gain deeper responsive controls.
Blocks arranged side by side on desktop (Columns, Row) automatically stack vertically on smaller screens. Column blocks, for example, rearrange into a single column on mobile without any configuration.
You can set the number of columns at each breakpoint. A three-column desktop layout can become two on tablet and one on mobile.
Font sizes scale smoothly between minimum and maximum values based on viewport width. Configure in Appearance > Editor > Styles > Typography. A heading might be 48 px on a 1440 px monitor and 32 px on a 390 px phone, with smooth interpolation in between.
Padding and margin settings can use fluid values that adapt to viewport size, keeping content comfortable on every device.
Advanced users can customise breakpoints via theme.json — though most users do not need to touch the defaults.
WordPress automates responsive image delivery in ways most other platforms require plugins for.
When you upload an image, WordPress generates multiple versions: thumbnail, medium, medium-large, large and full. Each version occupies disk space but gives the browser options.
WordPress writes srcset attributes on image tags listing all available sizes. The browser picks the best size for the current viewport and device pixel ratio. A visitor on a phone downloads a smaller image; a visitor on a 4K monitor downloads the largest.
Since WordPress 5.5, images below the visible area carry loading="lazy". Browsers defer loading until the user scrolls near them, reducing initial page weight.
Editor preview is a start, but proper testing needs more.
Chrome DevTools > Toggle Device Toolbar (F12 then Ctrl+Shift+M). Emulates specific devices: iPhone 15, Pixel 8, iPad. Lets you see the site at exact viewport sizes, test touch events, and throttle network to simulate 3G/4G.
Open your site on an actual phone and tablet. Check:
Free online tool: search "Google Mobile-Friendly Test" or go to Search Console. Enter your URL. Google reports whether it considers the page mobile-friendly and flags specific issues.
Mobile scores are weighted heavily. Largest Contentful Paint, Cumulative Layout Shift and Interaction to Next Paint all matter. Target all-green in the mobile results.
Body text under 16 px is hard to read on phones. Set body font size to 16–18 px minimum. Avoid fixed viewport scaling that prevents zoom.
Google flags tap targets smaller than 48 × 48 px or closer than 8 px apart. Fix by increasing button/link padding, especially in navigation menus.
If your page extends horizontally on mobile, something is breaking the viewport width. Usually an oversized image, a table with fixed width, or CSS with width: 100vw. Inspect with DevTools' responsive mode to find the culprit.
Google downgrades pages with intrusive interstitials on mobile. Newsletter pop-ups that cover the whole screen immediately on arrival are the worst offender. Use exit-intent or scroll-triggered pop-ups instead.
Usually unoptimised images or too many scripts. Enable LiteSpeed Cache's image optimisation; enable lazy loading; defer non-critical JavaScript.
Hiding content entirely via display: none on mobile is fine occasionally, but Google can treat hidden content as less important. Prefer responsive layout changes over hiding.
type="tel", type="email") to trigger the right keyboard.Server-level choices affect mobile speed as much as any front-end optimisation.
On top of these, the Plesk WordPress Toolkit's Smart Update lets you test performance changes (e.g. enabling more caching) on staging first, visual-diff the results, and promote to production with confidence.
Are all WordPress themes responsive?
Almost all modern themes are. Any theme released in the last five years and still maintained should be responsive. Abandoned or very old themes may not be — check before installing.
How do I check if my site is mobile-friendly?
Use Google's Mobile-Friendly Test (via Google Search Console or direct URL tool). Flags specific issues. Also test on a real phone.
What is the ideal body font size for mobile?
16–18 px. Smaller than 16 causes readability problems; larger can feel oversized on compact phones. 17 px is a reliable default.
Do I need a separate mobile theme or "m." subdomain?
No, never. Separate mobile sites are obsolete since 2013 and harmful for SEO. A single responsive theme covers every device.
Why does my site look different on iPhone vs Android?
Minor differences are normal due to browser rendering and OS UI. Major differences usually indicate a bug — often CSS that works in Chrome but not in Safari, or viewport meta-tag issues.
How do I fix a broken mobile menu?
Check theme settings for mobile menu options. If broken, try switching to a default theme temporarily to isolate whether the problem is theme-specific. Plugin conflicts occasionally break mobile menus too.
What about very large screens (4K, ultrawide)?
Modern themes usually limit content width on large screens (e.g. max-width 1400 px) to avoid line lengths becoming unreadable. If content spreads to fill a 4K screen uncomfortably, add a max-width constraint in custom CSS.
Should I use AMP (Accelerated Mobile Pages)?
No longer recommended. AMP was a Google-driven standard for fast mobile pages; Google has since removed the "AMP required" constraints from Top Stories carousel. Core Web Vitals replace AMP as the mobile speed metric. Existing AMP plugins can be deactivated without penalty.
Why does Google flag my site as "not mobile friendly" even though I use a responsive theme?
Usually a specific page issue — an oversized image, a table without responsive CSS, an embedded iframe with fixed dimensions. Google's Mobile-Friendly Test points to the specific problem.
How do I test on an iPhone if I only own Android?
BrowserStack, LambdaTest and similar services offer browser testing on actual iOS devices. Free trials available. Or use Chrome DevTools' iOS Safari emulation as a first-pass check.
Launch your WordPress site on smartxhosting.uk
UK hosting with the Plesk WordPress Toolkit, LiteSpeed Cache, Redis object caching, free Let’s Encrypt SSL, free CDN and daily backups — from £2/month.
View WordPress hosting plans →