How to Fix Horizontal Scroll in WordPress

How to Fix Horizontal Scroll in WordPress

Last updated: July 2026

Quick Answer

To fix horizontal scroll in WordPress, open your browser’s DevTools, use the element inspector to find what is pushing past the page width, then either resize that element with CSS or apply overflow-x: hidden to its parent container. Adding overflow-x: hidden to the entire body tag is a common quick fix, but it is a band-aid: it hides the symptom without removing the oversized element causing it. As we cover at Canada Create, the durable fix always starts with finding the actual culprit element.

Prerequisites

• Access to your WordPress site’s Customizer, Additional CSS panel, or a child theme’s stylesheet
• Browser DevTools (Chrome, Firefox, or Edge all work) to inspect elements, per Chrome DevTools documentation
• Basic familiarity with CSS selectors and the WordPress admin
• A staging copy of your site if you plan to test CSS changes on a live store

Step 1: Confirm the Problem on Multiple Devices

1a. Test on desktop and mobile

Horizontal scroll often shows up only on mobile, where narrower viewports expose elements that fit fine on desktop. Open your site on a phone, or use DevTools’ device toolbar to simulate common screen widths like 375px and 414px.

1b. Note where the scroll starts

Scroll down the page slowly and note which section introduces the sideways scroll. This narrows your search before you open the inspector. Canada Create readers often ask why this varies between the homepage and inner pages, and it is almost always because different templates or page builder rows are in play.

Step 2: Find the Offending Element With DevTools

2a. Open the inspector

Right-click anywhere on the page and choose Inspect, or press F12. Switch to the Elements panel.

2b. Run a quick console check

In the Console tab, paste this snippet to instantly highlight any element wider than the viewport:

document.querySelectorAll('*').forEach(el => {
  if (el.scrollWidth > document.documentElement.clientWidth) {
    el.style.outline = '2px solid red';
    console.log(el);
  }
});

Every element with a red outline is a candidate for the fix. Common culprits include unstyled <table> elements, full-width background sections with a fixed pixel width, embedded iframes or videos, and images without a max-width: 100% rule.

Step 3: Apply the Right Fix for the Element Type

3a. Oversized images

Add this rule to your theme’s Additional CSS panel (Appearance > Customize > Additional CSS):

img { max-width: 100%; height: auto; }

3b. Unstyled tables

Wrap wide tables in a scrollable container instead of letting them push the whole page:

.table-wrap { overflow-x: auto; }

3c. Full-bleed sections or page builder rows

Page builder plugins sometimes output a section with a fixed width larger than 100vw. Target the specific class from DevTools and add:

.offending-class { max-width: 100%; overflow-x: hidden; }

3d. Embedded iframes and videos

Make embeds responsive with this rule, a pattern also recommended in the MDN CSS overflow documentation:

iframe, video { max-width: 100%; }

Step 4: Check the Viewport Meta Tag

If the entire mobile layout scrolls sideways rather than a single element, your theme’s viewport meta tag may be missing or misconfigured. It should read:

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

Most modern WordPress themes include this by default, but custom themes or heavily modified child themes sometimes drop it. Check your theme’s header.php if you have code access, or ask your developer to confirm it is present. Canada Create’s development team checks this on every new client site audit, since it is one of the most common overlooked causes.

Step 5: Use the Body-Level Fallback Carefully

If you cannot isolate the exact element, or you need an immediate fix while you investigate further, add this to Additional CSS as a temporary measure:

html, body { overflow-x: hidden; }

This is a common quick fix for how to fix horizontal scroll wordpress pages fast, but treat it as temporary. It can interfere with sticky positioning and horizontal scroll menus elsewhere on the page, so plan to replace it with a targeted fix once you find the real cause. Canada Create generally recommends this only as a stopgap, never as the final solution.

Troubleshooting

• Scroll only appears on one page: The issue is likely a specific block or shortcode on that page rather than a theme-wide problem. Check the page builder content first.
• Scroll disappears after F12 refresh but returns on reload: This usually means a plugin is injecting content after page load, such as a lazy-loaded slider. Check plugins that add sliders, carousels, or popups.
• overflow-x: hidden does not fix it: Some elements use position: absolute or negative margins that ignore overflow rules on ancestor elements. You may need overflow-x: clip on the html element instead, which has broader effect.
• Fix works on desktop but not mobile: Double-check the viewport meta tag from Step 4, and inspect the page at the exact mobile breakpoint using DevTools’ device toolbar.

As we often tell Canada Create clients, horizontal scroll bugs are rarely caused by “WordPress” itself. They are almost always caused by one plugin, one image, or one page builder row that ignores the container width. If you are also dealing with general site slowness alongside the scroll issue, our guide on how to improve website load time and speed covers related front-end cleanup that often fixes both problems together.

Related to WordPress Site Health

If your site runs on shared hosting, heavier page builder sections can also slow things down while causing layout bugs like this one. Our breakdown of what actually slows down a WordPress site on shared hosting is a good next read if overflow issues keep resurfacing after every plugin update. Canada Create also recommends auditing theme code for rogue negative margins, a frequent cause of the same symptom, which we touch on in our WordPress security fundamentals guide when reviewing custom theme code more broadly.

If you recently switched analytics tools, note that tracking scripts like the ones compared in our MonsterInsights vs Site Kit comparison can also inject dashboard widgets that occasionally introduce their own overflow, so it is worth ruling out a recently installed plugin before assuming it is a theme issue. Canada Create sees this specific interaction often enough that it is one of the first things we check during a layout audit.

Frequently Asked Questions

Why does my WordPress site scroll sideways on mobile only?

Mobile viewports are narrower, so elements that fit on a desktop screen, like a wide table or a fixed-width section, get pushed past the edge. Test with DevTools’ mobile emulator to catch it before a customer does.

Is overflow-x: hidden a permanent fix?

It can mask the symptom immediately, but it does not remove the oversized element causing the scroll. It also risks breaking intentional horizontal scroll elements like image carousels, so treat it as a temporary fix while you locate the real cause.

Can a plugin cause horizontal scroll?

Yes. Sliders, popups, and page builder addons are common culprits, especially if they load content dynamically after the page renders. Disable plugins one at a time to isolate the source if CSS fixes alone do not resolve it.

Related Resources

• What Actually Slows Down a WordPress Site on Shared Hosting?
• How to Improve Website Load Time and Speed
• MonsterInsights vs Site Kit Compared

Struggling with layout bugs across your whole site? Canada Create’s web design team in The Annex, Toronto offers WordPress cleanup and CSS audits for small business sites that need a fast, reliable fix.