How to disable overflow in WordPress (remove horizontal scrolling)

Want to disable the leak on your WordPress site?

A horizontal scrollbar appears when an element on that page is too wide to display and extends beyond the screen. Most WordPress themes don’t use horizontal scrolling because it can break the layout of your site and confuse users.

In this article, we will show you an easy and quick way to disable overflow and remove horizontal scrollbar in WordPress.

What Causes Horizontal Scrollbar or Overflow in WordPress?

When creating your WordPress site, it’s important to make it user-friendly and accessible to everyone.

WordPress will show a horizontal scrollbar if the element is wider than your site layout. This is called “flooding”. Having a horizontal scroll bar can break your design and make your website less user-friendly.

A web page with horizontal and vertical scroll bars can be confusing for the visitor and become difficult to navigate. This can cause people to leave your site, resulting in lower conversions and sales.

Disabling the water flow can be useful for you because it will make your website more user-friendly and intuitive.

Shutting off the leak is an extremely easy process. With that in mind, let’s see how to easily disable overflow horizontal scrollbar in WordPress.

  • Method 1: Adding a CSS snippet using the Theme Customizer
  • Method 2: Adding a CSS snippet using WPCode

Method 1: Adding a CSS snippet using the Theme Customizer

You can disable overflow in WordPress by simply adding CSS code in the “Additional CSS” option of the theme customization.

All you have to do is go to the WordPress dashboard and click Appearance » Customize.

Note: You can see External view » Editor: instead of Personalize. This means your theme is using the Full Site Editor (FSE) instead of the Theme Customizer and you should refer to our guide on how to fix a missing theme customizer or use method 2 below.

Choose an additional CSS option from the theme customizer

Once you’re on the Customize page, click on the “Additional CSS” option and then simply copy and paste the following code.

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

After pasting the code, any bleed will be removed and you’ll be able to see it applied in the live preview panel of your site.

Don’t forget to click the “Publish” button at the top of the page when you’re done.

Paste the CSS code into the additional CSS field

Method 2: Adding a CSS snippet using WPCode

You can also add CSS via a code snippet using the WPCode plugin.

WPCode is the most popular code snippet plugin used by over 1 million websites. We recommend this method because this plugin makes it easy to add custom code to WordPress without editing any files in your theme.

So, the first thing you need to do is install and activate the WPCode plugin on your website. For more details, you can see our step-by-step guide on how to install a WordPress plugin.

When you activate the app, it will add a new menu item labeled Code snippets in your WordPress admin bar. Click it and you will be taken to the All Sections page.

Go ahead and click the Add New button to add your CSS code.

Go to Code Snippets and click Add New.

Now that you’re on the Add Fragment page, you can either search the WPCode fragment library, or you can start your own from scratch. That’s what you’ll do here.

Just hover over “Add your custom code (new snippet)” and click “Use snippet”.

Click the

Once you’re on the Create Custom Snippet page, start typing a title for your code snippet. This is just for you and it may be all that helps you figure out the code.

Next, you need to select “Code Type” from the drop-down menu on the right. Note that WPCode doesn’t offer an option for CSS, so you’ll need to click the “Universal Snippet” option.

Select Universal Snippet as the code type

Next, all you need to do is copy and paste the following CSS code into Code Preview.

<style type="text/css">
html, body {
	max-width: 100%;
	overflow-x: hidden;
}
</style>

After pasting the code it will look like this:

Paste your CSS code into WPCode

After that, scroll down to the “Installation” section. Here you will find two options, Auto Insert and Shortcode.

You will select the Auto Insert option to have your code automatically inserted and run on your site.

Select Installation Mode

However, if you just want to disable the horizontal scrollbar on some specific pages, you can use the conditional logic option in WPCode to display the snippet only on a specific page.

Alternatively, you can use the WPCode Pro version to load snippets into custom post pages using the block editor.

Once you’ve selected your option, scroll to the top of the page and toggle from “Inactive” to “Active” in the top right corner.

Then simply click on the “Save Fragment” button.

Save your CSS snippet

That’s it. You’ve just removed any horizontal scroll bars from your site.

We hope this article helped you learn how to disable overflow on your WordPress site. You can also check out our expert picks for must-have WordPress plugins to grow your website and our beginner’s guide on how to create a contact form in WordPress.

If you enjoyed this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us Twitter: and Facebook.

The post How to disable overflow in WordPress (Remove horizontal scrolling) appeared first on WPBeginner.

Leave a Reply