Most WordPress sites that are not mobile friendly have one of three causes: an old theme that was never responsive, page builder or block settings that ignore mobile, or custom CSS with fixed widths. Fix them in that order: confirm the theme is responsive, adjust mobile settings in the editor or builder, then clean up custom code and plugins. Check each step in a phone-sized view before moving on.
Step 1: check whether your theme is responsive
Open your site in a mobile view (see how to see the mobile version of a website) and look at a plain page, such as the privacy policy, that has no custom layout. If even that page is zoomed out or scrolls sideways, the theme is the problem.
Two quick checks:
- View the page source and search for
name="viewport". A responsive theme outputs the viewport meta tag in the<head>. If it is missing, the theme predates mobile design. - Check the theme’s age and updates in Appearance > Themes. A theme that has not been updated in several years is a risk beyond mobile layout.
If the theme is not responsive, switching themes is usually cheaper than patching it. Current default block themes, such as Twenty Twenty-Five, and most actively maintained themes are responsive out of the box. Try the new theme with Live Preview before activating it.
Step 2: use the editor’s mobile preview
WordPress has built-in device previews:
- In the block editor and Site Editor, the preview control in the top toolbar switches between Desktop, Tablet and Mobile.
- In the classic Customizer (for classic themes), device buttons at the bottom of the sidebar do the same.
These previews resize the canvas, which is good for spotting layout issues while editing. They do not send a mobile user agent, so confirm on the live page in a proper mobile view afterwards.
Step 3: fix block layouts for small screens
Common block editor issues and their fixes:
- Columns that squeeze instead of stacking. Select the Columns block and make sure Stack on mobile is turned on.
- Fixed widths and heights. Image, Cover and Group blocks can carry fixed pixel sizes. Prefer percentage widths and minimum heights over fixed heights, so text is not cut off on narrow screens.
- Large font sizes. A 72 px heading that looks good on desktop overflows on a phone. Use the theme’s fluid typography presets where available, which scale with the screen.
- Wide tables. Tables with many columns overflow phones. Keep them short, or let them scroll horizontally inside their own container.
Step 4: check page builder mobile settings
If you use a page builder such as Elementor, Divi or Beaver Builder, most mobile problems come from settings applied only at desktop size. Builders have a responsive mode with separate mobile and tablet values for spacing, font size, column width and visibility.
- Switch the builder to its mobile view.
- Reduce large paddings and margins set in pixels.
- Adjust heading sizes for mobile.
- Check the column order when columns stack; reverse it if the image appears before the heading it illustrates.
- Avoid hiding important content on mobile. Google indexes the mobile version, so hidden text may as well not exist.
Builders also define their own breakpoints (Elementor’s defaults are 767 px for mobile and 1024 px for tablet, and you can add more). Make sure custom CSS uses the same widths. More on picking widths: responsive breakpoints.
Step 5: fix the menu
On mobile, the navigation should collapse into a menu button. Block themes do this with the Navigation block’s overlay setting (set it to Mobile or Always). For classic themes, the theme handles it; if it does not, that is another sign to change themes. Keep the mobile menu short and test that sub-menus open by tap.
Step 6: images and speed
WordPress already does a lot here: it creates several sizes of each upload and adds srcset so phones get smaller files, and it lazy-loads images by default. You can help it by:
- uploading images no larger than they will ever be displayed
- converting to WebP or AVIF (supported natively by recent WordPress versions, or through an image plugin)
- using a caching plugin or host-level caching
- removing plugins you do not use; each one can add scripts to every page
Measure the result with the methods in the mobile page speed test guide.
Step 7: hunt down custom CSS and plugin conflicts
If the site still scrolls sideways, find the element that is too wide. In Chrome DevTools, run this in the Console to list elements wider than the screen:
[...document.querySelectorAll('*')].filter(el => el.scrollWidth > document.documentElement.clientWidth)Typical culprits are width: 1200px rules in Appearance > Customize > Additional CSS, embedded widgets with fixed sizes (old social feeds, maps, forms) and sliders that set inline widths.
Step 8: test the live site properly
Editor previews are a start. Before you call the job done:
- Open key pages in a mobile view in Chrome. Mobile View Extension does this with one click and loads the live page with a mobile user agent, so you see what phones actually get, including what caching or mobile-specific plugins serve.
- Test forms and checkout on a real phone.
- Run a Lighthouse mobile audit (how-to).
If something looks different on phones than in the preview, why a website looks different on mobile lists the usual reasons.
Frequently asked questions
Why does my WordPress site look fine in the editor but not on my phone?
Editor previews only resize the canvas. Caching plugins, mobile-specific plugins, CDN settings and the phone’s own browser can change what is served. Check the live page in a real mobile view and clear caches after changes.
Do I need a plugin to make WordPress mobile friendly?
Usually not. A responsive theme does most of the work. Plugins that create a separate mobile theme were common years ago but are rarely needed now.
Is AMP still needed for mobile WordPress sites?
No. AMP is optional, and a fast responsive page meets the same goals without a separate format.