Archived topic
Continuous horizontal scroll of post loop items
9 replies · Started by George on August 21, 2022
I would like to achieve the horizontal scrolling in the example attached, the comparison chart. Is there a way I could put a GB post loop and have it horizontally populate the space, then add a horizontal slider bar at the bottom? I don't think any of the slider plugins can do that and I have a feeling that with some CSS I could achieve this.
Hi George,
You can place the Query Loop Block in a Container Block with class my-query-container.
Then add this CSS:
.my-query-container .gb-grid-wrapper.gb-query-loop-wrapper {
flex-wrap: nowrap;
}
.my-query-container {
overflow-x: scroll;
}Is there any way to control the width of each loop column? It defaults to 4 columns per viewable section even though, I've set the container width to 100%.
Hi there,
can we see the site ?
Hi David, it's below the featured image.
Ok, with that set up, give the column a flex-basis value eg. 360px.
I did, no luck!
Make sure the Flex Shrink is set to 0
Yeah, better, thanks again!
Glad to hear that!
