Horizontal scroll in a particular section of the site (not all of it)

Design help General
1

Hey guys i’m trying to put a few images in one line (inline block) and make it scroll horizontally only…
How can i do that?

2

Use overflow:

.element{
    width:100%;
    height:100px;
    overflow:scroll;
    white-space: nowrap;
}

Check out this fiddle

Hope it helps

2 Likes
3

Ok should i do it to the row element? And how do i define white-space: nowrap in webflow?

4

You will need to place the code provided by Makloon in the custom code side of Webflow. Head Section.

5

Nice @makloon! I never realized that white-space: nowrap; would also prevent forward and back navigation in the browser when you bump the extent of the scroll (mac Chrome and Safari). That is an exceptionally helpful little snippet of code - greatly appreciate you posting the example!

6

Thanks, last question, should i insert it inside a style tag?

7

Hi @ariels, yes, use the <style>...</style> tags to wrap around css styles you put into your Head section of the site :smile:

Cheers, Dave

8

It will be nice to have white-space: properties natively in webflow. Don’t you think so?

9

I have used this option of nowrap severally. But since yesterday Webflow has not been working with his option when published. Webflow has been performing badly of late.

10

Hi @topelovely, do you have a read only site link that I could look at, to see what might be the issue?

Cheers, Dave