WordPress Theme Not Responsive on Mobile: Find the Element That Will Not Shrink

Tiny text, sideways scroll and cut-off tables

Nearly every theme still on sale is described as responsive, and out of the box most of them are. Sites stop being responsive later, when content, builder sections, plugins and custom CSS are added by people checking on a desktop monitor. What the visitor sees on a phone falls into a few recognizable patterns, and each points at a different cause.

If the menu is the only thing broken, go to mobile menu not working instead; that is usually a script problem, not a layout one.

The viewport tag: check this before anything else

Phones assume a page was designed for a desktop unless the page says otherwise. Without a viewport meta tag, mobile browsers lay the page out at a desktop width and scale it down, so everything looks tiny and the theme's mobile CSS never activates. The tag that prevents this tells the browser to use the device's own width.

Block themes get it from WordPress itself: since WordPress 5.8, core prints a viewport tag with width=device-width and initial-scale=1 for block templates. Classic themes print their own in header.php. That is where it goes missing: a child theme with a header.php copied years ago, a custom header file a developer wrote, or a plugin that replaces the head. Check by opening the page source on the live site and searching for 'viewport'. If it is missing, restore it in the child theme's header or remove the outdated header.php so the parent's version takes over.

Fixed widths and overflow: hunting the wide element

Sideways scroll means something on the page is wider than the screen. One element is enough. Common offenders are an inline style with a pixel width, an image inserted at full size with a width attribute and no max-width rule, a builder section with a fixed width or a negative margin, a slider set to a desktop width, and a long URL or product code with no spaces to wrap on. Twenty Twenty-Five users have reported long titles overlapping instead of wrapping on narrow screens.

Check in Chrome or Edge: press F12, turn on the device toolbar, pick a phone size and scroll sideways to see what sticks out. In the console you can list every element wider than the screen with a one-line script that compares each element's width to the window's. Fix the element itself with max-width: 100%, a responsive width, or word wrapping on long strings. Avoid hiding the overflow on the body; it hides the scroll bar and leaves content clipped. Then check on a real phone, because emulation is not a phone. Astra users have reported a mobile menu that works in device emulation and fails on real devices.

Builder responsive settings and theme breakpoints

Page builders store separate values per device. A designer sets a section's padding, font size and columns on desktop, and the phone gets whatever the builder inherits, which can be 80 pixels of padding around a 375-pixel screen. Elementor, Divi and Bricks all have per-device controls: Divi 5 has seven customizable breakpoints, and Bricks ships default breakpoints at 992, 768 and 478 pixels. Open each broken section in the builder's mobile view and set the values there.

The theme has its own breakpoints, and they rarely match the builder's. Astra switches to its tablet header at 921 pixels and its mobile layout at 544, changeable only with PHP filters. Kadence uses its tablet and mobile header at 1024 pixels and below. GeneratePress turns the navigation into a mobile menu below 768 pixels, with a slider for it in GP Premium. Blocksy shows its mobile header below 1000 pixels. When the theme's header collapses at one width and the builder's content at another, there is a band of screen sizes where the page looks wrong. Our Elementor mobile layout problems page covers the most common builder.

Tables and embeds: content that brings its own width

Content inserted by editors is the most common cause on older sites. A pricing table with six columns cannot fit a phone, and no theme can make it fit; it can only let the table scroll inside its own box. Wrap wide tables in a container with horizontal scrolling, or redesign them as stacked cards for mobile. Embedded videos and maps arrive as iframes with fixed width and height attributes copied from the source site. Set them to full width with an aspect ratio in CSS, use WordPress's embed block instead of pasted code, and check that a classic theme declares responsive embed support so WordPress can resize embeds. Ads and third-party widgets that inject fixed-size boxes behave the same way.

Repairing mobile layout without breaking desktop

1. 1

   Test on real phones

   List the broken pages and the phone sizes where they fail. Screenshot each fault. Check both an iPhone and an Android device if you can.

2. 2

   Confirm the viewport tag

   View the live page source and search for viewport. Restore it in the child theme if it is missing.

3. 3

   Find the wide element

   Use device mode and the console to find every element wider than the screen. Note whether it comes from content, a builder section, a plugin or custom CSS.

4. 4

   Fix it at the source

   Remove fixed pixel widths, add max-width rules, set builder values in the mobile view, and allow long strings to wrap.

5. 5

   Contain tables and embeds

   Wrap wide tables in a scrolling container and give embeds full width with an aspect ratio.

6. 6

   Align the breakpoints

   Compare the theme's mobile breakpoint with the builder's and test the widths in between.

7. 7

   Clear caches and recheck

   Clear every cache layer, including any mobile cache, then check the same pages on the same phones again.

Themes with their own mobile story

Some themes handle phones in their own way, which changes the fix. Newspaper can serve a separate tagDiv Mobile Theme with a lighter layout, so a mobile problem may live in a different theme from the desktop one. WoodMart is built mobile-first with a bottom navigation bar. Storefront has a reported case of double scroll bars and extra space when the menu has many sub-menu items. For theme-specific pages, see Twenty Twenty-Five mobile menu, Astra mobile menu and Storefront mobile menu.

To keep it fixed, check new pages on a phone before publishing, keep table and embed rules in the child theme so editors cannot break them, and recheck mobile pages after every builder update. Layout jumps during loading are a related problem: see content shifting during load. Our mobile responsive fixes service tests on real devices and fixes in place, and design and layout repair covers the desktop side.

When the site was designed for a desktop first

Patching mobile layouts element by element works, up to a point. If every page has sections with desktop-only values, the theme's breakpoints fight the builder's, and the phone downloads desktop images and scripts as well, the problem is the build, not a bug. Google indexes the mobile version of your pages, so this is not cosmetic.

A Next.js site is built responsive in code, with images resized per device by next/image and layouts tested at each width before release. It costs more to build and needs a developer for layout changes. Weigh it with mobile speed on WordPress themes and Core Web Vitals on WordPress vs Next.js. The troubleshooting hub has more symptoms, and our theme troubleshooting team can tell you which path fits.