Why Does My WordPress Site Look Broken on Mobile?

Why This Happens

Theme developers test their own templates and default components thoroughly across screen sizes before release, but they have no way to anticipate every piece of custom content a site owner might add afterward. A wide table pasted into a post, an embedded video without a responsive wrapper, or a page-builder section using fixed pixel widths instead of relative units can all break the mobile experience even on an otherwise genuinely well-built responsive theme.

Common Culprits

Wide tables or code blocks pasted directly into content without a scrollable wrapper, forcing the page to widen or causing horizontal scroll on mobile.
Embedded videos or iframes without a responsive wrapper technique applied, which can display at a fixed size regardless of the actual screen width.
Page builder sections using fixed pixel widths for columns or elements, rather than percentages or other relative units that adapt to the actual viewport.
Large images without proper responsive image handling, forcing the layout wider than the screen rather than scaling down correctly.
Custom CSS added over time that wasn't tested at every breakpoint, sometimes conflicting with the theme's own responsive rules in specific, narrow scenarios.

How to Diagnose and Fix It

Use browser developer tools' device/responsive mode to identify exactly which element breaks and at what screen width.
Wrap wide tables and embeds in a scrollable or responsive container rather than letting them force page width.
Review any custom CSS or page-builder settings using fixed pixel widths, adjusting to relative units where appropriate.
Test any new content added going forward across a few common screen widths before considering it finished.

Finding the element that breaks the layout

Use the browser's device mode and scroll sideways. If the page scrolls horizontally, something is wider than the screen. Pasting this into the console lists the elements that extend past the right edge:
```
[...document.querySelectorAll('body *')].filter(el => el.getBoundingClientRect().right > window.innerWidth);
```
Confirm the viewport tag exists. The page head should contain <meta name="viewport" content="width=device-width, initial-scale=1">. Without it, phones render a desktop-width page and shrink it.
Test at several widths, such as 320, 375 and 768 pixels, and on a real phone as well as in the emulator.
Look at recent changes. Temporarily disable custom CSS and recently added plugins, and check the page builder's mobile overrides.

Safe, quick fixes

Most problems from pasted content respond to a few rules in Additional CSS:

img { max-width: 100%; height: auto; }
.entry-content table { display: block; overflow-x: auto; }
iframe, video { max-width: 100%; }

Class names vary between themes, so adjust the selectors to match yours, and re-test at each width after adding them.

Need mobile display issues found and fixed properly? See WordPress bug fix.

Go deeper

Case study: Freizeitcenter Dietz — how a build with this kind of requirement was handled.