How to Disable Overflow in WordPress (Take out Horizontal Scroll)

Do you want to disable overflow on your WordPress web page?

A horizontal scroll bar appears when an element on that website page is too wide to screen and overflows past the monitor. Most WordPress themes really do not use horizontal scrolling because it can crack your internet site layout and confuse consumers.

In this write-up, we will demonstrate you an effortless and speedy way to disable overflow in WordPress and take out the horizontal scroll bar.

What Causes Horizontal Scroll Bar or Overflow in WordPress

When setting up your WordPress site, it is crucial to make it consumer-pleasant and accessible for anyone.

WordPress will present a horizontal scrollbar if an ingredient is broader than your internet site format. This is referred to as ‘overflow.’ Acquiring a horizontal scroll bar can split your design and style and make your site considerably less consumer-welcoming.

A web web site with both equally horizontal and vertical scroll bars can be disorienting for the visitor and grow to be hard to navigate. It can consequence in folks leaving your web site triggering lower conversions and sales.

Disabling overflow can be effective for you as it will make your web-site additional person-helpful and intuitive.

Disabling the overflow is an exceptionally uncomplicated course of action. With that in thoughts, let us consider a seem at how to effortlessly disable the overflow horizontal scroll bar in WordPress. 

Approach 1: Adding the CSS Snippet working with Concept Customizer

You can disable overflow in WordPress by only adding a CSS code in the ‘Additional CSS’ alternative of the topic customizer.

All you have to do is go to the WordPress dashboard and simply click Overall look » Customise.

Note: You may possibly see Look » Editor as an alternative of Customise. This indicates your theme employs the comprehensive-internet site editor (FSE) as an alternative of the Topic Customizer, and you should check out our guideline on how to take care of the missing topic customizer or use System 2 beneath.

At the time you are on the Personalize web site, click on on the ‘Additional CSS’ selection and then simply just copy and paste the pursuing code.

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

The moment you’ve pasted the code, any overflow will be eliminated, and you are going to be capable to see it used on your website’s reside preview pane.

Don’t neglect to simply click on the ‘Publish’ button at the prime of the webpage when you are done!

System 2: Introducing The CSS Snippet Employing WPCode

You can also include the CSS by using code snippet employing the WPCode plugin.

WPCode is the most well-known code snippet plugin, made use of by more than 1 million web sites. We endorse this technique as this plugin would make it straightforward to add personalized code to WordPress without having having to edit any of your topic files.

So the very first matter you want to do is put in and activate the WPCode plugin on your website. For a lot more details, you can see our stage to step guide on how to set up a WordPress plugin.

When you have activated the plugin, it will incorporate a new menu product labeled Code Snippets to your WordPress admin bar. Click it, and you will be taken to the ‘All Snippets’ page.

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

Now that you are on the ‘Add Snippet’ page, you can possibly search the WPCode snipept library, or you can begin from scratch with your very own. That is what you will do in this article.

Simply just hover more than ‘Add Your Personalized Code (New Snippet)’ and click on ‘Use Snippet.’

Once you’re on the ‘Create Personalized Snippet’ web page, begin by getting into a title for your code snippet. This is for you only, and it can be anything that assists you recognize the code.

Up coming, you are going to have to pick the ‘Code Type’ from the drop-down menu on the suitable. Note that WPCode does not provide an selection for CSS, so you are going to want to click on on the possibility ‘Universal Snippet.’

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

It will seem like this at the time you’ve pasted the code:

After that, scroll down to the ‘Insertion’ part. Below, you’ll find two alternatives, ‘Auto Insert’ and ‘Shortcode.’

You will pick the ‘Auto Insert’ choice so that your code will be instantly inserted and executed on your site.

Having said that, if you just want to disable the horizontal scroll bar on some unique webpages, you can use the conditional logic option in WPCode to only present the snippet on distinct site.

Alternatively, you can use the WPCode Professional version to load snippets on particular submit web pages working with the Block Editor.

At the time you have selected your option, go to the top rated of the webpage and toggle the switch from ‘Inactive’ to ‘Active’ in the top ideal corner.

Then, just click on the ‘Save Snippet’ button.

That is it! You just eliminated any horizontal overflow scroll bars on your website.

We hope this report helped you find out how to disable the overflow on your WordPress website. You may also want to see our specialist picks of need to-have WordPress plugins to expand your web site, and our beginner’s guide on how to produce a make contact with variety in WordPress.

If you favored this posting, then please subscribe to our YouTube Channel for WordPress movie tutorials. You can also obtain us on Twitter and Fb.