Website Building » Elementor » How do I stop horizontal Elementor scrolling?

How do I stop horizontal Elementor scrolling?

Last updated on December 22, 2022 @ 7:52 am

If you’re looking to stop your Elementor site from scrolling horizontally, you can do so by following these simple steps:

1. First, you’ll need to add a simple CSS code to your site. To do this, go to “Appearance” on the left menu and select the “Customize” option.


2. Now you’ll need to add some additional CSS to override the default behavior of your site. To do this, on the new page where you’ll be redirected, scroll down and select “Additional CSS” from the options.


3. Finally, add the code below to stop the horizontal scrolling and hit on the “Publish” button.

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

4. To preview the changes made, go back to your Elementor editor and click on the “eye” icon below.

PRO TIP: If you are using Elementor to build your website, you may have noticed that horizontal scrolling is enabled by default. This can be annoying if you are trying to scroll down a page and the page keeps moving left and right.

To disable horizontal scrolling, just add a CSS code to your site’s custom settings.


These simple steps will stop your Elementor site from scrolling horizontally. If you’re having trouble implementing these steps, or if you just want to see the effect without having to manually adjust your CSS, you can use our free Elementor scrolling test page.

Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.