WordPress site not responsive on mobile: causes and fixes

01

Whole page shrunk or zoomed out: the viewport tag

If phones show a tiny desktop page, the viewport meta tag is missing. Most themes print it in header.php through wp_head; old or custom themes may not. Check the page source for it, and add it to the theme’s header if it is missing.

1<meta name="viewport" content="width=device-width, initial-scale=1">

02

Page builders: desktop settings on mobile

Elementor, Divi, WPBakery and the block editor keep separate settings for desktop, tablet and mobile. A fixed width, a large padding or a negative margin set only on desktop carries down to phones.

• Switch the builder to its mobile view and check widths, padding and margins on each section and column
• Replace fixed pixel widths with 100% or a max-width
• Turn on column stacking (“reverse columns” or “stack on mobile”) for rows with several columns
• Use the builder’s per-device font sizes for large headings

03

Plugins and embeds that don’t shrink

Sliders, tables, forms, maps and video embeds from plugins often come with a fixed width. Make them fit with CSS in Appearance → Customize → Additional CSS.

1img, video, iframe, embed { max-width: 100%; height: auto; }2.wp-block-table, table { display: block; overflow-x: auto; }

04

Find the element that breaks the layout

Open the page at 360px wide in your browser’s device mode and outline every element wider than the screen. The outermost outlined element is the one to fix; see the horizontal scroll guide for the console snippet and the five usual causes.

05

Diagnose it step by step

Do this on a staging copy, never on the live site.

1. 1Check the page source for the viewport meta tag
2. 2Switch to a default theme such as Twenty Twenty-Five on a staging copy: if the problem goes away, it is the theme
3. 3Turn plugins off one by one on staging (or with a troubleshooting plugin that only affects you): if the problem goes away, it is that plugin
4. 4Remove your Additional CSS temporarily: if the problem goes away, it is a custom rule
5. 5Check the page in the builder’s mobile view: if the problem only shows there, it is a per-device setting

06

Choose a responsive theme

Most current themes are responsive, but older and heavily customised ones are not. Before switching, open the theme’s demo on a phone and at a few widths in device mode, and check its last update date. A theme that hasn’t been updated in years is a common source of mobile problems.

07

Preview the site on mobile inside WordPress

In the Customizer (Appearance → Customize) and the Site Editor, the device buttons at the bottom show the page at tablet and phone widths. Page builders have their own responsive mode. These previews are a quick first check, but they use your desktop browser, so check real phone sizes and Safari before you call it done.

08

Text sizes that scale

Headings set in large pixel sizes on desktop overflow on phones. Use the per-device sizes in your builder, or fluid sizes in CSS so the text shrinks with the screen.

1h1 { font-size: clamp(1.9rem, 6vw, 3.25rem); }2h2 { font-size: clamp(1.5rem, 4.5vw, 2.25rem); }

09

Caching and the mobile theme

After fixing, clear the page cache (WP Rocket, W3 Total Cache, LiteSpeed) and any CDN cache, or phones keep the old page. Plugins that serve a separate mobile theme can also show a different layout from the one you edit: turn them off if your theme is already responsive.