How one can Disable Overflow in WordPress (Take away Horizontal Scroll)

Do you wish to disable overflow in your WordPress web site?

A horizontal scroll bar seems when a component on that web page is just too huge to show and overflows past the display. Most WordPress themes don’t use horizontal scrolling as a result of it might break your web site format and confuse customers.

On this article, we are going to present you a straightforward and fast technique 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 very important make it user-friendly and accessible for everybody.

WordPress will present a horizontal scrollbar if a component is wider than your web site format. That 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 may be disorienting for the customer and turn into arduous to navigate. It can lead to folks leaving your web site inflicting decrease conversions and gross sales.

Disabling overflow may be useful for you as it would 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 one can simply disable the overflow horizontal scroll bar in WordPress. 

Technique 1: Including the CSS Snippet utilizing Theme Customizer

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

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

Word: You would possibly 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 you must try our information on how to fix the missing theme customizer or use Method 2 under.

Choose Additional CSS option from theme customizer

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

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

When you’ve pasted the code, any overflow shall be eliminated, and also you’ll be capable of see it utilized in your web site’s dwell preview pane.

Don’t neglect to click on on the ‘Publish’ button on the high of the web page if you’re carried out!

Paste CSS code in Additional CSS field

Technique 2: Including The CSS Snippet Utilizing WPCode

You may also add the CSS through code snippet utilizing the WPCode plugin.

WPCode is the preferred code snippet plugin, utilized by over 1 million web sites. We advocate this technique as this plugin makes it straightforward so as to add customized code to WordPress with out having to edit any of your theme information.

So the very first thing it’s essential to do is set up and activate the WPCode plugin in your web site. For extra particulars, you’ll be able to see our step to step information on how to install a WordPress plugin.

When you’ve activated the plugin, it would add a brand new menu merchandise labeled Code Snippets to your WordPress admin bar. Click on it, and you may be taken to the ‘All Snippets’ web page.

Go forward 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’ web page, you’ll be able to both search the WPCode snipept library, or you can begin from scratch with your personal. That’s what you’ll do right here.

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

Click Use Snippet button

When you’re on the ‘Create Customized Snippet’ web page, begin by coming into a title in your code snippet. That is for you solely, and it may be something that helps you determine the code.

Subsequent, you’ll have to pick out the ‘Code Kind’ from the drop-down menu on the precise. Word that WPCode doesn’t provide an choice for CSS, so that you’ll have to click on on the choice ‘Common Snippet.’

Select Universal Snippet as Code Type

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

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

Paste your CSS code in WPCode

After that, scroll all the way down to the ‘Insertion’ part. Right here, you’ll discover two choices, ‘Auto Insert’ and ‘Shortcode.’

You’ll select the ‘Auto Insert’ choice in order that your code shall be routinely inserted and executed in your web site.

Choose an Insertion mode

Nonetheless, should you simply wish to disable the horizontal scroll bar on some particular pages, you should use the conditional logic choice in WPCode to solely present the snippet on particular web page.

Alternatively, you should use the WPCode Pro model to load snippets on particular put up pages utilizing the Block Editor.

When you’ve chosen your choice, go to the highest of the web page and toggle the swap from ‘Inactive’ to ‘Lively’ within the high proper nook.

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

Save your CSS snippet

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

We hope this text helped you discover ways to disable the overflow in your WordPress web site. You may additionally wish to see our knowledgeable 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 happen to appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may also discover us on Twitter and Facebook.

The put up How to Disable Overflow in WordPress (Remove Horizontal Scroll) first appeared on WPBeginner.

Source link

Leave a Comment