Key takeaways
- Google recommends responsive design, meaning one site and one URL that adapts to the screen. Separate mobile themes like WPtouch take the opposite approach.
- Most sideways scrolling comes from one element with a fixed width, such as a logo, header column or paragraph. Find that element and fix it. Don’t put overflow: hidden on the whole page.
- Test at 320 CSS pixels wide, the width WCAG 2.2 Reflow uses. Make tap targets at least 24 by 24 CSS pixels, the WCAG AA minimum.
- Google retired the Mobile-Friendly Test in December 2023. Use a real phone, Search Console URL Inspection and PageSpeed Insights instead.
- Speed is a separate job. In HTTP Archive’s 2025 Web Almanac, only 45% of WordPress sites passed Core Web Vitals on mobile.
The usual complaint is “it looks fine on desktop and awful on my phone.” The usual fix is smaller than people expect. Most themes made in the last several years are already responsive. One element, plugin setting or stale cache is breaking them.
Google indexes and ranks the mobile version of your pages. Its mobile-first indexing guide calls responsive design the easiest setup to build and maintain: one site and one URL, with the layout adapting to the screen. Everything below works toward that. If you already know which CSS rule you need, our guide to CSS media queries for mobile goes deeper.
What you need before you start
You need an admin login and a phone. Most fixes can be made in the block editor or with Additional CSS. Classic themes have Additional CSS under Appearance → Customize. Block themes have it in the Styles panel of the Site Editor. Editing theme files needs a child theme or hosting access. Take a backup first, and try larger changes on a staging copy if your host provides one.
Step by step: making the site work on phones
1. Write down what is actually broken
Open your most important pages on a real phone. That means the homepage, a service or product page, the contact form and, for stores, cart and checkout. For each problem, note the page, the screen width and the symptom, for example: “Contact page, 390px, submit button hidden behind sticky bar.” Then open Chrome DevTools, turn on the device toolbar and set the width to 320px. That is the width WCAG 2.2 Reflow uses. Content should read at that width without scrolling in two directions.
Google retired the Mobile-Friendly Test and the Search Console Mobile Usability report in December 2023. Older guides still send people to them. Use URL Inspection in Search Console to see how Google renders a page.
2. Confirm the theme is responsive and the viewport tag is there
View the page source and look for this line in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">Current themes almost always include it. Without it, phones draw a desktop-width page and shrink it. With it, fixed-width elements still overflow, so the tag alone isn’t enough. Don’t add maximum-scale=1 or user-scalable=no. W3C mobile accessibility guidance says to avoid them, because they stop people from zooming.
If the theme has no mobile layout at all, it’s a theme decision. See the section on rebuilding below.
3. Find the element that is wider than the screen
Sideways scrolling, or a white strip down the right side, almost always comes from a single element. Paste this into the DevTools console at phone width:
document.querySelectorAll('*').forEach(el => {
if (el.offsetWidth > document.documentElement.clientWidth) console.log(el);
});The usual suspects are a logo with a pixel width, a header split into fixed columns, an image or embed with inline sizes, and an animation that slides in from off-screen. Remove the fixed width, or override it at narrow widths:
img, video { max-width: 100%; height: auto; }
@media (max-width: 600px) {
.site-logo img { width: 160px; }
.wide-box { width: auto; }
}Don’t reach for overflow: hidden on the body. In one WordPress.org support thread about an Elementor header, that rule removed the side margin but clipped the mobile menu down to one visible item. If custom CSS has piled up, remove it and add it back one rule at a time until the problem returns.
4. Use the responsive controls WordPress already has
In the block editor, select a Columns block and check that “Stack on mobile” is on. WordPress 7.1 adds responsive styles to block themes. You can set a block’s font size, padding and other settings separately for mobile and tablet. Set them per block type under Appearance → Editor → Styles → Blocks, or per block in its Responsive styles view.
The limits trip people up. Responsive styles only work in block themes. Tablet values don’t carry over to mobile, so set mobile on its own. Some toolbar controls, such as text alignment, still apply at every size. Your theme’s breakpoints may also differ from the defaults. Page builders keep their own per-device settings, and a margin set on desktop may need changing again on mobile.
5. Check embeds, tables and text inside images
A responsive page can still hold a video that doesn’t resize. If you control the theme, opt in with add_theme_support( 'responsive-embeds' );. The Block Editor Handbook lists this as an opt-in feature, so it is off by default. Wide tables are one of the exceptions in the Reflow guidance. They can scroll inside their own box while the page stays put:
.wp-block-table { overflow-x: auto; }Text baked into an image shrinks with the image until nobody can read it. Put the words in a Cover block or a heading instead.
6. Make menus, buttons and forms work with a thumb
WCAG 2.2 Target Size (Minimum) sets 24 by 24 CSS pixels as the AA minimum for anything people tap, with some exceptions. Treat that as the floor. Bigger and better-spaced is easier. Open and close the menu, then fill in each form with your thumb. Watch for a keyboard or sticky bar covering the submit button, labels that vanish once you start typing, and error messages that appear off-screen. Use type="email" and type="tel" on fields so phones bring up the right keyboard.
7. Keep the mobile content the same as desktop
Hiding blocks on mobile is tempting. Google warns that primary content missing from the mobile version, or loaded only after a tap or swipe, may not be indexed. Titles, meta descriptions and structured data should match desktop too. Hide decoration, not prices, contact details or copy. Accordions and tabs are fine as long as the content is in the page.
Don’t force the desktop layout onto phones either. A WordPress.org volunteer explained the reason to an owner who wanted exactly that: visitors end up zooming and scrolling sideways. Mobile-specific CSS is the better fix.
8. Test the store pages separately
A theme can handle blog posts well and still struggle with WooCommerce. WooCommerce’s guide to choosing the right theme says to check every store page, including My Account, cart and checkout. On a phone, choose a product option, change the quantity and get as far as payment.
9. Clear every cache layer
“My fix didn’t work” often means “I’m looking at old CSS.” Purge your caching plugin, then your host’s cache, then the CDN, then your browser. Clearing one layer can leave another serving the old version. Our guide on a WordPress page not updating walks through the order.
10. Treat speed as its own job
A layout can fit perfectly and still be slow on mobile data. HTTP Archive’s 2025 Web Almanac found that 45% of WordPress sites passed all Core Web Vitals on mobile. Google’s “good” thresholds are LCP within 2.5 seconds, INP below 200 milliseconds and CLS below 0.1.
Start with images. Resize them to the size they actually display at, use WebP and lazy-load images below the fold. Don’t lazy-load the hero image, because that delays LCP. Then look at third-party scripts and heavy plugins. Our guide to optimizing pictures in WordPress covers the image side.
What a correct result looks like
At 320px and on your own phone, nothing scrolls sideways. Text reads without pinching. The menu opens, closes and shows every link. Forms submit and show their errors next to the right field. The store pages work through to payment. URL Inspection shows Google the same content as desktop. A good PageSpeed score doesn’t prove the menu works, and a poor one doesn’t mean the layout is broken. Check both.
If it still breaks after the fix
Suspect an optimisation or plugin setting before you suspect the theme. In one TablePress support thread, horizontal scrolling on mobile stopped working because of SiteGround Optimizer’s “Combine JavaScript Data” setting. Turning it off fixed the problem. On a staging copy, turn off one suspect at a time, such as JS combining, CSS combining or animations, and retest after each. Turning an optimisation off can lower your speed score. Keep that tradeoff in mind instead of switching everything off.
When the theme isn’t worth retrofitting
Sometimes the theme stacks everything into one column that looks wrong, or it has no mobile layout at all. At that point you are fighting the theme with overrides. Nobody has good data on when rebuilding beats retrofitting. A useful test: if most of your fix list is “override the theme’s layout,” the theme is the problem. If it’s a handful of elements, fix the elements.
When to stop and get help
Stop if the fix needs theme files and you have no backup, if checkout is affected, or if you have been turning plugins on and off on the live site for an hour. If you’d rather describe the problem, for example “the menu on the contact page is cut off on phones,” and have someone make the edit and check it, SiteSelf handles website edits through chat. Pages owned by Elementor, Divi or Beaver Builder are refused, and you are told why.