Webflow sync, pageviews & more.
NEW
Answers

How can I disable the horizontal scroll on my Webflow site while keeping the vertical scroll enabled?

To disable horizontal scrolling on your Webflow site while keeping the vertical scroll enabled, you can use custom CSS to override the default behavior. Here's how:

1. Open your Webflow project and go to the Designer.
2. Navigate to the page where you want to disable horizontal scrolling.
3. Click on the "Add" button in the left sidebar and select "Page Settings" from the dropdown menu.
4. In the Page Settings panel, click on the "Custom Code" tab.
5. In the "Head Code" section, add the following CSS code:

```css
body {
overflow-x: hidden;
}
```

6. Save your changes and publish your site.

This CSS code targets the `body` element of your site and sets the `overflow-x` property to "hidden," which hides the horizontal scrollbar. As a result, users won't be able to scroll horizontally, and the vertical scroll will still be enabled.

Remember that this solution applies to the entire site. If you only want to disable horizontal scrolling on a specific section or element, you can target that particular element's class or ID instead of the `body` element.

Additionally, keep in mind that disabling horizontal scrolling may have unintended consequences for responsive design and mobile devices. Make sure to thoroughly test your site on different screen sizes and devices to ensure it still functions properly without the horizontal scroll.

Rate this answer

Other Webflow Questions