Disable only horizontal scrolling in Webflow

Tutorial
March 20, 2023
3 min
Webflow Tutorial Illustration
Key points

Webflow offers a wide range of features to style your website. With the Styles panel, you can assign different formatting options to your elements. You don’t need to code, as your CSS stylesheet updates automatically when you design in Webflow.

However, sometimes certain design features are not yet available in the Webflow Styles panel. We may need to add custom code to our pages to apply specific styling. In today’s article, we will introduce a simple method to disable only the horizontal scroll of an element.

Webflow's overflow hidden is not the solution!

At first glance, one might think that to achieve this, we can select our element and apply the overflow: hidden property in the "Size" section of the Styles panel. The overflow: auto property does not always work either.

However, if we do this, we will notice that anything extending beyond our element is hidden both horizontally AND vertically. We will show you a method that allows you to hide only what overflows horizontally from our element.

Solution with the Overflow-x CSS Property

There is a CSS property that allows you to disable only the horizontal scroll of a specific element. The overflow-x property enables us to specify a value concerning horizontal overflow.

To use it in Webflow, simply:

  • Insert an embed element
  • Add the following code
<style>
.nom-classe { 
  overflow-x : clip; 
}
</style>

Now, all child elements that overflow horizontally from your element will be clipped.

Note that currently, some browsers, like Safari, do not support this code. Therefore, it is recommended to add code between our style tags for these browsers. For example, specifically for Safari, we can use an overflow hidden by adding the following code:

<style>
.nom-classe { 
  overflow-x : clip; 
}

/* Safari 11+ */ 
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) and (stroke-color:transparent) { 
    .nom-classe { 
      overflow : hidden; 
    }
  }
}

/* Test website on real Safari 11+ */ /* Safari 10.1 */
@media not all and (min-resolution:.001dpcm){ 
  @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) { 
    .nom-classe { 
      overflow:hidden; 
    } 
  }
}

/* Safari 6.1-10.0 (but not 10.1) */ 
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ 
  @media { 
    .nom-classe {
      overflow:hidden; 
    }
  }
}
</style>

If you want to change the vertical overflow values, you can do the same manipulation with overflow-y.

For more tips on Webflow, stay connected to our no-code blog or directly check out our article on creating horizontal scroll buttons!

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

A woman speaks on stage at a conference, wearing a headset microphone. Behind her, a large black screen displays the question “What then?” in bold white text.
Events
Webflow

Digidop attends FLOWconf 2025, the biggest Webflow & marketing event in Europe.

Digidop attends FLOWconf 2025, the biggest Webflow & marketing event in Europe.
Visual overview of several modern web typefaces in 2025, each displayed on a vibrant background: Editorial New, DM Serif Display, Aeonik, SF Pro Rounded, Rader, Champ, Monument, Canicule, Clash Display, Supply, Agrandir, and more — a graphic composition highlighting typographic diversity.
Documentation
Design

The 20 Best Fonts for a Modern and Impactful Website in 2025

The 20 Best Fonts for a Modern and Impactful Website in 2025
Mosaic of homepage designs from several Webflow agencies (Digidop, N4, Refokus, Flow Ninja, Tonik, Finsweet, Edgar Allan), showcasing diverse creative approaches and visual identities centered around the Webflow logo.
Storytelling
Webflow

My Top 7 Webflow Agencies in 2025 (From a Founder’s Perspective)

My Top 7 Webflow Agencies in 2025 (From a Founder’s Perspective)

Want to turn your website into your most valuable asset?

Contact us today