Disable only horizontal scroll in Webflow

Tutorial to disable the horizontal scroll of a section or an element in your webflow project with some code using the css overflow-x property

Key points to remember

Webflow offers a wide range of features to style your website. Thanks to the Styles panel you can assign different formatting options to your elements. You don't need to code because your css stylesheet is automatically updated when you design in Webflow.

However, it happens that some design features are not yet present in the Webflow style panel. Sometimes we need to add custom code to our pages to apply a special formatting. In today's article, we will show you a simple way to disable only the horizontal scroll of an element.

The hidden overflow of Webflow is not the solution!

We could say at first that to realize this manipulation, we can select our element and apply to it the overflow : hidden property in the "Size" section of the Style panel. The property overflow: auto, does not work all the time too.

However, if we do this, we notice that the horizontal AND vertical overhangs of our element are hidden. We are going to show you a method that allows you to hide only what protrudes horizontally from our element.

Solution with the Overflow-x css property

There is a css property that allows us to disable only the horizontal scroll of a particular element. The overflow-x property allows us to give a specific value regarding the horizontal overflow.

To use it in Webflow, just :

Insert an embed element
Add the following code

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

Now all child elements that protrude horizontally from your element are cut off.

Attention, at the moment some browsers like safari do not support this code. It is therefore recommended to add code between our style tags for these browsers. For example, only for safari, we can use a hidden overflow by adding this 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 with overflow-y.

For more Webflow tips, stay tuned to our no-code blog or go directly to our article on how to create horizontal scroll buttons!