Fix Horizontal Scrolling in WordPress

Fix Horizontal Scrolling in WordPress

Fix horizontal scrolling on your WordPress website with a simple CSS safeguard. Horizontal scrolling occurs when an element extends beyond the viewport, allowing users to drag the page sideways on smaller screens. If your website shifts horizontally on mobile devices, this quick fix will help prevent it.

As a baseline safeguard, BlankPress installs should include the following CSS in Elementor Site Settings on every project. For a complete reference on all supported values and browser behavior, see the MDN documentation for the `overflow-x` CSS property.

↑ Back to Table of Contents

The Fix

Inject the following code into your Elementor Site Settings for a quick fix.

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

This simple rule prevents accidental horizontal scrolling caused by overflowing elements while providing a consistent starting point for responsive layouts.

↑ Back to Table of Contents

Why BlankPress Uses This CSS

Because BlankPress is a minimalist theme, every website begins with a small collection of baseline CSS rules that improve stability across modern browsers and devices. This snippet is one of them.

Although the root cause of horizontal scrolling should always be identified and corrected, adding this rule to the root document helps prevent minor overflow issues from affecting the user experience during development and after launch.

Rather than treating it as a shortcut, BlankPress treats it as a defensive layer that complements proper responsive design.

↑ Back to Table of Contents

What Causes Horizontal Scrolling?

Horizontal scrolling is usually the result of another element extending beyond the viewport.

Common causes include:

Elements using width: 100vw
Fixed-width containers
Images that exceed their parent container
Negative margins
Absolutely positioned elements
CSS Grid or Flexbox layouts that don’t wrap correctly
Third-party embeds, maps, or sliders

While this baseline rule hides the overflow from the user, these issues should still be investigated and resolved whenever possible.

↑ Back to Table of Contents

When Should You Use This Snippet?

BlankPress should include this rule by default, and it also provides a reliable foundation for almost every custom WordPress website.

For projects that intentionally include horizontal scrolling components—such as sliders, drag-to-scroll galleries, or off-canvas interfaces—additional testing may be required to ensure the desired behaviour is preserved.

↑ Back to Table of Contents

BlankPress Best Practice

This CSS is included as part of the BlankPress baseline recommendations, not as a replacement for proper debugging.

If horizontal scrolling appears during development, the first step should always be identifying the element causing the overflow. Once corrected, this rule remains in place as an additional safeguard against unexpected layout issues introduced by future updates or content changes.

This approach keeps websites resilient while encouraging clean, maintainable CSS.

↑ Back to Table of Contents

Final Thoughts

Preventing horizontal scrolling is a small change that can make a noticeable difference to the overall user experience, particularly on mobile devices.

By including this rule in every BlankPress project, we establish a consistent baseline that helps deliver responsive, polished WordPress websites while still prioritizing the underlying quality of the layout itself.

↑ Back to Table of Contents

You’ve completed this BlankPress guide.

→ Build BlankPress