Disable only horizontal scrolling in Webflow

Tutorial

March 20, 2023

3 min

H2 Example

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!