Horizontal scroll container

Hi there,

Can you specify with part of the site do you want to apply this on?

This is generally done by assigning a fixed width to elements for it to purposely overflow from its parent/container element. You then add overflow-x: scroll; to the parent/container element so it scrolls.

I want to implement it on a block that is situated at the top of this page that includes icons and descriptions. this will be used on a number of pages.
I have included the page in the private comments as well as a screenshot.

Cheers,

Dave

Any ideas on this?

cheers,

Dave

Hi there,

it's doable.... see this topic here:

https://generatepress.com/forums/topic/horizontal-scroll-container/#post-1538657

One thing you will need to do is first create a 6 item grid - see this article here:

https://docs.generateblocks.com/article/grid-overview/#adding-more-grid-items

thanks David. If I create the 6 item grid, can I still have it display like it is on desktop and then implement the scroll on mobile and tablet?
I am assuming I would have to add additional css for the desktop display?

Cheers

Dave

Also, Is it possible to put directional arrows on either side of it like in the example?

cheers,

Dave

1. Yes - if you check the Doc i provided above it shows you how to create the 6 grid item across two rows and all of the responsive settings you have in GB will be kept... that CSS will simply change it for Mobile.

2. That would require Javascript and some custom development to add the clickable arrows... i don't have anything in my snippets library for that unfortunately.