Do you need to disable overflow in your WordPress web site?
A horizontal scroll bar seems when a component on that web page is just too broad to show and overflows past the display screen. Most WordPress themes don’t use horizontal scrolling as a result of it might probably break your web site format and confuse customers.
In this text, we are going to present you a straightforward and fast method to disable overflow in WordPress and take away the horizontal scroll bar.
What Causes Horizontal Scroll Bar or Overflow in WordPress
When organising your WordPress website, it is necessary to make it user-friendly and accessible for everybody.
WordPress will present a horizontal scrollbar if a component is wider than your web site format. This is known as ‘overflow.’ Having a horizontal scroll bar can break your design and make your web site much less user-friendly.
An online web page with each horizontal and vertical scroll bars will be disorienting for the customer and develop into laborious to navigate. It may result in folks leaving your web site inflicting decrease conversions and gross sales.
Disabling overflow will be helpful for you as it should make your web site extra user-friendly and intuitive.
Disabling the overflow is a particularly straightforward course of. With that in thoughts, let’s check out how to simply disable the overflow horizontal scroll bar in WordPress.
Method 1: Adding the CSS Snippet utilizing Theme Customizer
You can disable overflow in WordPress by merely including a CSS code in the ‘Additional CSS’ possibility of the theme customizer.
All you may have to do is go to the WordPress dashboard and click on Appearance » Customize.
Note: You would possibly see Appearance » Editor as an alternative of Customize. This means your theme makes use of the full-site editor (FSE) as an alternative of the Theme Customizer, and you need to take a look at our information on how to fix the missing theme customizer or use Method 2 beneath.
Once you’re on the Customize web page, click on on the ‘Additional CSS’ possibility after which merely copy and paste the next code.
html, physique {
max-width: 100%;
overflow-x: hidden;
}
Once you’ve pasted the code, any overflow might be eliminated, and also you’ll give you the option to see it utilized in your web site’s stay preview pane.
Don’t overlook to click on on the ‘Publish’ button on the high of the web page once you’re achieved!
Method 2: Adding The CSS Snippet Using WPCode
You may add the CSS by way of code snippet utilizing the WPCode plugin.
WPCode is the most well-liked code snippet plugin, utilized by over 1 million web sites. We advocate this technique as this plugin makes it straightforward to add customized code to WordPress with out having to edit any of your theme recordsdata.
So the very first thing you want to do is set up and activate the WPCode plugin in your web site. For extra particulars, you possibly can see our step to step information on how to install a WordPress plugin.
Once you’ve activated the plugin, it should add a brand new menu merchandise labeled Code Snippets to your WordPress admin bar. Click it, and you can be taken to the ‘All Snippets’ web page.
Go forward and click on on the ‘Add New’ button to add your CSS code.
Now that you simply’re on the ‘Add Snippet’ web page, you possibly can both search the WPCode snippet library, or you can begin from scratch with your individual. That’s what you’ll do right here.
Simply hover over ‘Add Your Custom Code (New Snippet)’ and click on on ‘Use Snippet.’
Once you’re on the ‘Create Custom Snippet’ web page, begin by coming into a title to your code snippet. This is for you solely, and it may be something that helps you determine the code.
Next, you’ll have to choose the ‘Code Type’ from the drop-down menu on the suitable. Note that WPCode doesn’t provide an possibility for CSS, so that you’ll want to click on on the choice ‘Universal Snippet.’
Next, all you may have to do is copy and paste the next CSS code snippet into the ‘Code Preview’.
<fashion kind="text/css">
html, physique {
max-width: 100%;
overflow-x: hidden;
}
</fashion>
It will appear like this when you’ve pasted the code:
After that, scroll down to the ‘Insertion’ part. Here, you’ll discover two choices, ‘Auto Insert’ and ‘Shortcode.’
You will select the ‘Auto Insert’ possibility in order that your code might be mechanically inserted and executed in your web site.
However, if you happen to simply need to disable the horizontal scroll bar on some particular pages, you need to use the conditional logic possibility in WPCode to solely present the snippet on particular web page.
Alternatively, you need to use the WPCode Pro model to load snippets on particular put up pages utilizing the Block Editor.
Once you’ve chosen your possibility, go to the highest of the web page and toggle the swap from ‘Inactive’ to ‘Active’ in the highest proper nook.
Then, simply click on the ‘Save Snippet’ button.
That’s it! You simply eliminated any horizontal overflow scroll bars in your web site.
We hope this text helped you learn the way to disable the overflow in your WordPress web site. You may need to see our skilled picks of must-have WordPress plugins to grow your site, and our newbie’s information on how to create a contact form in WordPress.
If you favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may discover us on Twitter and Facebook.
The put up How to Disable Overflow in WordPress (Remove Horizontal Scroll) first appeared on WPBeginner.
by 
