Methods to Disable Overflow in WordPress (Take away Horizontal Scroll)

by | Nov 23, 2022 | Etcetera | 0 comments

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

A horizontal scroll bar turns out when an element on that internet web page is just too massive to turn and overflows previous the computer screen. Most WordPress subjects don’t use horizontal scrolling on account of it might be able to wreck your website online construction and confuse consumers.

In this article, we can show you an easy and speedy technique to disable overflow in WordPress and remove the horizontal scroll bar.

How to disable overflow in WordPress

What Causes Horizontal Scroll Bar or Overflow in WordPress

When setting up your WordPress website online, it is important to make it user-friendly and to be had for everyone.

WordPress will show a horizontal scrollbar if an element is wider than your web page construction. That is referred to as ‘overflow.’ Having a horizontal scroll bar can wreck your design and make your web page a lot much less user-friendly.

A web internet web page with every horizontal and vertical scroll bars can also be disorienting for the buyer and develop into exhausting to navigate. It can result in people leaving your website online causing lower conversions and product sales.

Disabling overflow can also be truly useful for you as it will make your website online additional user-friendly and intuitive.

Disabling the overflow is a particularly easy process. With that right through ideas, let’s take a look at the easiest way to easily disable the overflow horizontal scroll bar in WordPress. 

Method 1: Together with the CSS Snippet using Theme Customizer

You’ll be capable of disable overflow in WordPress by means of simply together with a CSS code inside the ‘Additional CSS’ selection of the theme customizer.

See also  Easy methods to Upload a Delivery Calculator to Your WordPress Website

All it’s a will have to to do is cross to the WordPress dashboard and click on on Glance » Customize.

Phrase: It is advisable see Glance » Editor instead of Customize. This means your theme uses the full-site editor (FSE) instead of the Theme Customizer, and in addition you’ll have to check out our data on the best way to repair the lacking theme customizer or use Means 2 below.

Choose Additional CSS option from theme customizer

Whilst you’re on the Customize internet web page, click on on on the ‘Additional CSS’ selection and then simply reproduction and paste the following code.

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

Whilst you’ve pasted the code, any overflow will probably be removed, and in addition you’ll be able to see it applied to your web page’s live preview pane.

Don’t fail to remember to click on on on the ‘Submit’ button at the best of the internet web page when you’re accomplished!

Paste CSS code in Additional CSS field

Method 2: Together with The CSS Snippet The use of WPCode

You’ll be capable of moreover add the CSS by way of code snippet using the WPCode plugin.

WPCode is the most popular code snippet plugin, used by over 1 million internet websites. We propose the program as this plugin makes it easy in an effort to upload custom designed code to WordPress with out a wish to edit any of your theme files.

So the first thing you need to do is about up and switch at the WPCode plugin to your web page. For added details, you’ll be capable of see our step to step data on the best way to set up a WordPress plugin.

See also  Find out how to Create a Searchable Member Listing in WordPress

Whilst you’ve activated the plugin, it will add a brand spanking new menu products categorised Code Snippets to your WordPress admin bar. Click on on it, and also you’ll be taken to the ‘All Snippets’ internet web page.

Transfer ahead and click on on on the ‘Add New’ button in an effort to upload your CSS code.

Go to Code Snippets and click Add New

Now that you just’re on the ‘Add Snippet’ internet web page, you’ll be capable of each search the WPCode snippet library, otherwise you’ll be capable of get began from scratch with your own. That’s what you’ll do proper right here.

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

Click Use Snippet button

Whilst you’re on the ‘Create Custom designed Snippet’ internet web page, get began by means of getting into a reputation to your code snippet. This is for you easiest, and it can be anything this is serving to you resolve the code.

Next, you’ll have to select the ‘Code Type’ from the drop-down menu at the correct. Phrase that WPCode does now not offer an selection for CSS, in order that you’ll wish to click on on on the selection ‘Not unusual Snippet.’

Select Universal Snippet as Code Type

Next, all it’s a will have to to do is reproduction and paste the following CSS code snippet into the ‘Code Preview’.

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

It will look like this whilst you’ve pasted the code:

Paste your CSS code in WPCode

After that, scroll proper right down to the ‘Insertion’ phase. Proper right here, you’ll find two alternatives, ‘Auto Insert’ and ‘Shortcode.’

You’ll choose the ‘Auto Insert’ selection so that your code will probably be robotically inserted and finished to your website online.

See also  8 Tactics to Claim Colours in CSS: Detailed Information + Examples
Choose an Insertion mode

However, whilst you merely wish to disable the horizontal scroll bar on some particular pages, you’ll be capable of use the conditional just right judgment selection in WPCode to only show the snippet on particular internet web page.

Alternatively, you’ll be capable of use the WPCode Professional fashion to load snippets on particular post pages using the Block Editor.

Whilst you’ve decided on your selection, cross to the best possible of the internet web page and toggle the switch from ‘Inactive’ to ‘Vigorous’ inside probably the most good correct corner.

Then, merely click on at the ‘Save Snippet’ button.

Save your CSS snippet

That’s it! You merely removed any horizontal overflow scroll bars to your website online.

We hope this text helped you learn how to disable the overflow to your WordPress website online. You may additionally wish to see our skilled alternatives of must-have WordPress plugins to develop your website, and our amateur’s data on the best way to create a touch shape in WordPress.

When you most well-liked this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You’ll be capable of moreover find us on Twitter and Fb.

The post Methods to Disable Overflow in WordPress (Take away Horizontal Scroll) first seemed on WPBeginner.

WordPress Maintenance

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more


Submit a Comment

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