To remove unwanted horizontal scrolling in WordPress, first identify the element extending beyond the viewport and correct its width or wrapping. If the extra content is safe to conceal, a targeted overflow-x: hidden rule can clip it—but that hides the symptom rather than fixing the oversized layout.
What horizontal overflow means
Horizontal overflow occurs when content extends beyond the available width of its containing element or the viewport. The CSS overflow-x property controls what happens at an element’s left and right edges. A constrained width or inline size combined with content that cannot wrap—such as text using white-space: nowrap—can cause overflow. MDN’s overflow-x reference and overflow guide explain these behaviors.
Not every horizontal scrollbar is a defect. A wide table, carousel, or other deliberately scrollable component may need horizontal movement. Check whether the page itself is wider than the viewport or whether only a particular component is meant to scroll before applying a page-wide rule.
Find the source before hiding overflow
- Reproduce the problem. Open the page at the device or viewport width where the extra scrolling appears.
- Inspect the layout. Identify the element extending past the viewport. Check for fixed or constrained widths, oversized images or media, positioned elements, and content that cannot wrap. These are diagnostic possibilities; MDN specifically identifies constrained width or inline size and
nowrapas overflow conditions. - Fix that element if practical. Adjust its sizing, wrapping, or responsive behavior so it fits the available space. This preserves content and interaction better than clipping the whole page.
- Use clipping only when appropriate. If the content outside the viewport is safe to conceal, apply the narrowest rule that solves the problem, then preview the affected pages and interactions.
Choose between fixing the element and clipping the page
| Approach | Use it when | Trade-off |
|---|---|---|
| Correct the overflowing element | You can identify the content causing the extra width and make its sizing or wrapping responsive. | Usually preserves content and expected interaction, but requires finding and correcting the specific cause. |
| Clip overflow on a broader container | The excess content is safe to conceal and a source-level correction is impractical. | Can remove the visible scrollbar while leaving the oversized content in place; clipped content may be inaccessible or obscured. |
Choose based on whether the hidden material matters, whether horizontal interaction is intentional, and whether keyboard focus and normal vertical scrolling still work across the page templates and viewport widths you support.
Recommended Free Tools
#1 Best Overall
Add the CSS in the right WordPress editor
Classic themes
Go to Appearance > Customize > Additional CSS. The Customizer lets you preview CSS changes before publishing. WordPress explains that custom CSS loads after the theme’s original CSS, allowing you to override specific declarations without rewriting the full stylesheet. See the WordPress CSS handbook and Customizer documentation.
Block themes
Go to Appearance > Editor > Styles, then open the Additional CSS control from the Styles menu. WordPress recommends starting with the built-in Styles controls where they meet your needs. The Customizer may not appear for block themes; the Styles documentation also notes that navigation changed in WordPress 6.9. See Styles overview.
Theme files
Avoid editing a parent theme’s stylesheet for a quick fix because a theme update may overwrite the change. Use the theme’s supported custom CSS route or an appropriate child-theme or development workflow. WordPress outlines these options in its CSS handbook.
Apply a narrow horizontal overflow rule
If clipping is suitable, add this CSS through the active theme’s supported custom CSS editor:
Rank #3
html,
body {
overflow-x: hidden;
}This clips content extending past the element’s horizontal padding box and removes the visible horizontal scrollbar; it does not resize or remove the underlying content. Avoid adding overflow-y: hidden unless you intend to suppress vertical overflow too. Do not substitute the shorthand overflow: hidden casually: with one value, it applies to both axes. See MDN’s overflow-x reference and overflow reference.
A WordPress tutorial also suggests adding max-width: 100% to html and body, but that is not a universal cure. A width limit on the root elements does not necessarily correct the particular child element causing overflow. Prefer fixing that child when possible; use root-level clipping only when the off-screen content can safely be concealed. See the WPBeginner tutorial.
Understand the difference between hidden and clip
overflow-x: hidden clips excess content but leaves the element as a scroll container. Hidden material may still be revealed through programmatic scrolling or brought into view by keyboard focus. By contrast, overflow-x: clip clips the excess without creating a scroll container and forbids scrolling, including programmatic scrolling. MDN states: “The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.” Read the MDN reference before using clip around interactive content; it can make content outside the clipped region unreachable.
Preview the fix and check interactions
- Preview before publishing in the Customizer, or review the change in the block theme’s Styles editor.
- Test the viewport widths and page types where the issue occurred, along with menus, dialogs, and other interactive elements.
- Check keyboard focus near the clipped edge so focused content is not obscured.
- Confirm ordinary vertical page scrolling still works and that intentionally scrollable tables or carousels retain their expected behavior.
In WordPress’s Styles interface, custom CSS is cleared when you switch themes, so verify whether the rule needs to be reapplied after a theme change. See Styles overview.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Quick Recap
Best Value
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.
