Methods to Disable Overflow in WordPress (Remove Horizontal Scroll)

Do you must disable overflow in your WordPress website?

A horizontal scroll bar appears when a component on that page is simply too wide to display and overflows beyond the screen. Most WordPress themes don’t use horizontal scrolling because it might probably break your site layout and confuse users.

In this text, we’ll show you a straightforward and quick strategy to disable overflow in WordPress and take away the horizontal scroll bar.

What Causes Horizontal Scroll Bar or Overflow in WordPress

When establishing your WordPress website, it is necessary to make it user-friendly and accessible for everybody.

WordPress will show a horizontal scrollbar if a component is wider than your website layout. This known as ‘overflow.’ Having a horizontal scroll bar can break your design and make your website less user-friendly.

A web page with each horizontal and vertical scroll bars could be disorienting for the visitor and turn out to be hard to navigate. It might lead to people leaving your site causing lower conversions and sales.

Disabling overflow could be helpful for you as it would make your site more user-friendly and intuitive.

Disabling the overflow is a particularly easy process. With that in mind, let’s take a take a look at methods to easily disable the overflow horizontal scroll bar in WordPress. 

Method 1: Adding the CSS Snippet using Theme Customizer

You’ll be able to disable overflow in WordPress by simply adding a CSS code within the ‘Additional CSS’ option of the theme customizer.

All you’ve got to do is go to the WordPress dashboard and click on Appearance » Customize.

Note: You may see Appearance » Editor as an alternative of Customize. This implies your theme uses the full-site editor (FSE) as an alternative of the Theme Customizer, and you must try our guide on methods to fix the missing theme customizer or use Method 2 below.

Choose Additional CSS option from theme customizer

When you’re on the Customize page, click on the ‘Additional CSS’ option after which simply copy and paste the next code.

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

When you’ve pasted the code, any overflow can be removed, and also you’ll give you the chance to see it applied in your website’s live preview pane.

Don’t forget to click on the ‘Publish’ button at the highest of the page if you’re done!

Paste CSS code in Additional CSS field

Method 2: Adding The CSS Snippet Using WPCode

You may as well add the CSS via code snippet using the WPCode plugin.

WPCode is the most well-liked code snippet plugin, utilized by over 1 million web sites. We recommend this method as this plugin makes it easy so as to add custom code to WordPress without having to edit any of your theme files.

So the very first thing you want to do is install and activate the WPCode plugin in your website. For more details, you possibly can see our step to step guide on methods to install a WordPress plugin.

When you’ve activated the plugin, it would add a latest menu item labeled Code Snippets to your WordPress admin bar. Click it, and also you can be taken to the ‘All Snippets’ page.

Go ahead and click on on the ‘Add New’ button so as to add your CSS code.

Go to Code Snippets and click Add New

Now that you simply’re on the ‘Add Snippet’ page, you possibly can either search the WPCode snippet library, or you possibly can start from scratch together with your own. That’s what you’ll do here.

Simply hover over ‘Add Your Custom Code (New Snippet)’ and click on on ‘Use Snippet.’

Click Use Snippet button

When you’re on the ‘Create Custom Snippet’ page, start by entering a title in your code snippet. That is for you simply, and it might probably be anything that helps you discover the code.

Next, you’ll have to pick out the ‘Code Type’ from the drop-down menu on the appropriate. Note that WPCode doesn’t offer an option for CSS, so that you’ll have to click on the choice ‘Universal Snippet.’

Select Universal Snippet as Code Type

Next, all you’ve got to do is copy and paste the next CSS code snippet into the ‘Code Preview’.

It’ll appear like this when you’ve pasted the code:

Paste your CSS code in WPCode

After that, scroll right down to the ‘Insertion’ section. Here, you’ll find two options, ‘Auto Insert’ and ‘Shortcode.’

You’ll select the ‘Auto Insert’ option in order that your code can be mechanically inserted and executed in your site.

Choose an Insertion mode

Nonetheless, if you happen to just wish to disable the horizontal scroll bar on some specific pages, you need to use the conditional logic option in WPCode to only show the snippet on specific page.

Alternatively, you need to use the WPCode Pro version to load snippets on specific post pages using the Block Editor.

When you’ve chosen your option, go to the highest of the page and toggle the switch from ‘Inactive’ to ‘Active’ in the highest right corner.

Then, just click the ‘Save Snippet’ button.

Save your CSS snippet

That’s it! You simply removed any horizontal overflow scroll bars in your site.

We hope this text helped you learn methods to disable the overflow in your WordPress site. You could also wish to see our expert picks of must-have WordPress plugins to grow your site, and our beginner’s guide on methods to create a contact form in WordPress.

In case you liked this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may as well find us on Twitter and Facebook.

Leave a Reply

Your email address will not be published. Required fields are marked *