Do you wish to have to disable overflow in your WordPress website online?

A horizontal scroll bar seems when a component on that web page is simply too huge to show and overflows past the display screen. Maximum WordPress topics don’t use horizontal scrolling as a result of it could possibly spoil your website structure and confuse customers.

On this article, we will be able to display you a very easy and fast solution to disable overflow in WordPress and take away the horizontal scroll bar.

How to disable overflow in WordPress

What Reasons Horizontal Scroll Bar or Overflow in WordPress

When putting in place your WordPress website online, it is very important make it user-friendly and available for everybody.

WordPress will display a horizontal scrollbar if a component is wider than your website online structure. This is known as ‘overflow.’ Having a horizontal scroll bar can spoil your design and make your website online much less user-friendly.

A internet web page with each horizontal and vertical scroll bars will also be disorienting for the customer and turn out to be laborious to navigate. It can lead to folks leaving your website inflicting decrease conversions and gross sales.

Disabling overflow will also be really helpful for you as it is going to make your website extra user-friendly and intuitive.

Disabling the overflow is an especially simple procedure. With that during thoughts, let’s check out the best way to simply disable the overflow horizontal scroll bar in WordPress. 

Means 1: Including the CSS Snippet the usage of Theme Customizer

You’ll be able to disable overflow in WordPress by way of merely including a CSS code within the ‘Further CSS’ choice of the theme customizer.

All it’s a must to do is pass to the WordPress dashboard and click on Look » Customise.

Word: You could see Look » Editor as an alternative of Customise. This implies your theme makes use of the full-site editor (FSE) as an alternative of the Theme Customizer, and also you will have to take a look at our information on the best way to repair the lacking theme customizer or use Means 2 under.

Choose Additional CSS option from theme customizer

While you’re at the Customise web page, click on at the ‘Further CSS’ choice after which merely replica and paste the next code.

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

While you’ve pasted the code, any overflow shall be got rid of, and also you’ll be capable to see it implemented in your website online’s are living preview pane.

Don’t omit to click on at the ‘Post’ button on the most sensible of the web page whilst you’re achieved!

Paste CSS code in Additional CSS field

Means 2: Including The CSS Snippet The usage of WPCode

You’ll be able to additionally upload the CSS by means of code snippet the usage of the WPCode plugin.

WPCode is the most well liked code snippet plugin, utilized by over 1 million web sites. We suggest this system as this plugin makes it simple so as to add customized code to WordPress with no need to edit any of your theme recordsdata.

So the very first thing you want to do is set up and turn on the WPCode plugin in your website online. For extra main points, you’ll be able to see our step to step information on the best way to set up a WordPress plugin.

While you’ve activated the plugin, it is going to upload a brand new menu merchandise categorized Code Snippets in your WordPress admin bar. Click on it, and you’ll be taken to the ‘All Snippets’ web page.

Move forward and click on at the ‘Upload New’ button so as to add your CSS code.

Go to Code Snippets and click Add New

Now that you simply’re at the ‘Upload Snippet’ web page, you’ll be able to both seek the WPCode snippet library, or you’ll be able to get started from scratch with your personal. That’s what you’ll do right here.

Merely hover over ‘Upload Your Customized Code (New Snippet)’ and click on on ‘Use Snippet.’

Click Use Snippet button

While you’re at the ‘Create Customized Snippet’ web page, get started by way of coming into a name in your code snippet. That is for you best, and it may be anything else that is helping you determine the code.

Subsequent, you’ll have to choose the ‘Code Sort’ from the drop-down menu at the proper. Word that WPCode does no longer be offering an choice for CSS, so that you’ll want to click on at the choice ‘Common Snippet.’

Select Universal Snippet as Code Type

Subsequent, all it’s a must to do is replica and paste the next CSS code snippet into the ‘Code Preview’.


It is going to seem like this while you’ve pasted the code:

Paste your CSS code in WPCode

After that, scroll right down to the ‘Insertion’ segment. Right here, you’ll in finding two choices, ‘Auto Insert’ and ‘Shortcode.’

You are going to make a selection the ‘Auto Insert’ choice in order that your code shall be routinely inserted and completed in your website.

Choose an Insertion mode

Then again, when you simply need to disable the horizontal scroll bar on some explicit pages, you’ll be able to use the conditional good judgment choice in WPCode to just display the snippet on explicit web page.

On the other hand, you’ll be able to use the WPCode Professional model to load snippets on explicit publish pages the usage of the Block Editor.

While you’ve selected your choice, pass to the highest of the web page and toggle the transfer from ‘Inactive’ to ‘Lively’ within the most sensible proper nook.

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

Save your CSS snippet

That’s it! You simply got rid of any horizontal overflow scroll bars in your website.

We are hoping this newsletter helped you discover ways to disable the overflow in your WordPress website. You might also need to see our professional choices of must-have WordPress plugins to develop your website, and our novice’s information on the best way to create a touch shape in WordPress.

In the event you preferred this newsletter, then please subscribe to our YouTube Channel for WordPress video tutorials. You’ll be able to additionally in finding us on Twitter and Fb.

The publish Methods to Disable Overflow in WordPress (Take away Horizontal Scroll) first gave the impression on WPBeginner.

WordPress Maintenance

[ continue ]