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

black and white photo of a digital marketing expert from behind presenting a communication project on his computer to a customer.
News
SEO

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025
2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Want to turn your website into your most valuable asset?

Contact us today