Pro theme: Confusion with div element and overflow-x:scroll

Howdy! I’m trying to get a particular requested layout to work, and while I think I have the concepts clear in my head, actually getting this to work is proving difficult.

I’m trying to create a row with a 33%/66% split; the 33% will be a static display (an image and some text), the 66% will be a series of images that scroll horizontally to display them all. Here’s a. snippet of the mockup I was given:

From the documentation on the div element (particularly the third paragraph under “Setup”), it seems like dropping a div element into the 66% portion of that row, turning on Flexbox with the “wrap” option disabled, and setting the x-overflow option to “scroll” should work…but it doesn’t, so I’m obviously missing something key. Instead, as I add more image boxes to the div, the images get smaller and smaller instead of staying the same size and creating the scroll bar when they clip outside of the frame. (No screenshot because this is my first post and I can only include one image per post.)

Are there some pointers as to just what I’m missing? I’m sure this is user error. :slight_smile:

Thanks much!

Hey @djwudi,

Regretfully, that setup is not yet possible. It would be best to use Slider Revolution or a carousel plugin for that image scroll part.

If you go with Slider Revolution, you can learn how to setup a carousel slider here https://www.sliderrevolution.com/documentation/carousel-settings/

If you prefer other plugins, please refer to the plugin’s user manual.

Thanks.

Hey, it may not be the answer I was hoping for, but “sorry, that doesn’t work” is a perfectly acceptable answer.

Thanks much for a pointer on another possible option to do what we’re looking for. I’ll dig into Slider Revolution and see what I can do with that.

Much appreciated!

Hi @djwudi,

Thanks for your appreciation, please let us know how it works for you.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.