Free tools Windows power users keep installed
One-click scans. No signup required.
Horizontal scrolling in WordPress means that some content is wider than the viewport. The safest fix is to identify and resize or wrap the element that is overflowing. If you need an immediate page-level workaround, add overflow-x: hidden to the page root—but understand that it clips the symptom rather than correcting the oversized content.
First find what is wider than the viewport
Reproduce the problem at the phone, tablet, or browser width where it appears. Confirm that this is unintended page overflow rather than a component designed to scroll, such as a carousel or a wide data table.
Use your browser’s developer tools to inspect the layout. Look for an element whose right edge extends beyond the viewport, then check its computed width, margins, padding, transforms, and positioning. Typical causes include:
- A fixed width or inline size that exceeds the available space.
- Images, videos, iframes, or other media that do not scale down.
- Absolutely or relatively positioned elements moved outside the page.
- Long text, buttons, navigation items, or code forced onto one line with
white-space: nowrap.
MDN identifies constrained width or inline-size and white-space: nowrap as conditions that can produce horizontal overflow. See MDN’s overflow guide.
#1 Best Overall
Fix the offending element when possible
Correct the source instead of hiding it whenever the content should remain available. Depending on what you find, use a fluid width, a responsive maximum width, wrapping, or a breakpoint-specific rule. For example, an embedded element may need a percentage width and a max-width of 100%; a long navigation row may need wrapping or a mobile menu; and a fixed-width block may need to use the parent container’s available inline size.
Check the result at several viewport widths after each change. A rule that fixes one phone width can create overflow on another template or at an intermediate width.
Quick page-level workaround: hide horizontal overflow
If the content outside the viewport is safe to conceal, add this narrow rule:
html,
body {
overflow-x: hidden;
}overflow-x controls what appears when content exceeds an element’s left or right edge. With hidden, excess content is clipped and the visible horizontal scrollbar is removed, but the underlying content is still oversized. MDN documents the property at https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow-x.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #3
Some WordPress guidance also combines the rule with max-width: 100% on html and body. Treat that as a situational workaround, not a universal cure: a root rule can hide an incorrectly sized child, a focused control, or a menu that should have been made responsive. The example appears in WPBeginner’s WordPress tutorial.
Do not use the shorthand overflow: hidden merely to remove a horizontal bar. The shorthand can suppress vertical scrolling as well. Keep the vertical axis unaffected unless you have deliberately tested that behavior; see MDN’s overflow reference.
Choose between hidden and clip
| Value | What it does | Important consequence |
|---|---|---|
hidden |
Clips content beyond the horizontal padding box and removes the visible horizontal scrollbar. | The element can remain a scroll container. Hidden material may still be revealed by programmatic scrolling or keyboard focus. |
clip |
Clips content without creating a scroll container. | Scrolling, including programmatic scrolling, is forbidden. Do not apply it around interactive content unless making anything outside the clipped region unreachable is intentional. |
MDN states: “The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.” Read the full definition at MDN’s overflow-x reference.
Add the CSS in the WordPress editor
Classic themes
- Open Appearance > Customize.
- Select Additional CSS.
- Paste the smallest rule that addresses the tested problem.
- Use the Customizer preview to check the affected pages and viewport sizes.
- Select Publish when the result is acceptable.
WordPress says custom CSS is loaded after the theme’s original CSS, allowing specific declarations to be overridden without rewriting the entire stylesheet. See the WordPress CSS handbook and Customizer documentation.
Best Value
Block themes
- Open Appearance > Editor.
- Open Styles, then choose the Additional CSS control from the Styles menu.
- Add the tested rule and save after reviewing the preview.
Block themes may not show the Customizer. WordPress recommends using built-in Styles controls where they provide the needed setting; site-wide CSS is available through the Additional CSS control. Navigation changed in WordPress 6.9, so labels can differ slightly by version. See the Styles overview.
Theme files and child themes
Avoid editing a parent theme’s stylesheet for a quick fix: a theme update can overwrite direct changes. Use the supported custom CSS editor, or put durable customizations in a child-theme or development workflow appropriate to the site. Test that the rule remains after theme changes.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Check accessibility and intentional horizontal interfaces
- Make sure keyboard users can reach menus, dialogs, forms, and focused controls near the page edge.
- Verify that vertical page scrolling still works.
- Confirm that no important text, buttons, or media are clipped on narrow screens.
- Leave intentionally scrollable tables, galleries, and carousels usable rather than hiding their overflow at the root.
- Test page templates, headers, footers, pop-ups, and logged-in and logged-out views—not only the page where you first noticed the bar.
If clipping hides meaningful content, remove the root workaround and repair the element’s width, wrapping, or responsive behavior instead.
Why the CSS may appear to stop working after a theme change
CSS stored through WordPress’s Styles interface can be cleared when the site switches themes. Record important rules and verify them after any theme change; WordPress documents this behavior in the Styles overview.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Quick Recap
A practical decision checklist
- Reproduce the overflow at the affected viewport.
- Determine whether the horizontal movement is intentional.
- Inspect the element extending beyond the viewport.
- Fix its sizing, wrapping, media behavior, or positioning if feasible.
- If clipping is safe, add only
overflow-x: hidden(or deliberately testedclip) to the narrowest suitable container. - Preview and test focus, menus, dialogs, vertical scrolling, and all affected templates before publishing.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
