[Resolved] Horizontal scrolling on mobile

[Duncan]

Hey,

I want to add a posts grid to my site using the grid block and a query loop.

But, instead of it being contained on desktop and vertical on mobile, I want the user to be able to scroll horizontally through the posts in the grid.

Is this possible?

Basically, the goal is for something like the “hear from the roadies” section on the below website, except the content will be posts not testimonials.

https://milkroad.com/

Thank you!

[David]

Hi there,

we don’t have a carousel feature for the Query Loop / Grid just yet. So no fancy auto scrolling or navigation.

It could be done with some CSS, if you have a Query Loop set up on your site, i can take a look if its possible ?

[Duncan]

Ah yes carousel, I knew there was a name for what I wanted 😊

Here is the home page. What I’m planning would be similar to the grid under the headings.

If you can share the CSS that would be perfect.

[Fernando]

Hi Duncan,

For plugins, here’s an article that may be helpful: https://www.wpbeginner.com/best-wordpress-slider/

In terms of custom CSS, this is what can be achieved: https://share.getcloudapp.com/E0uRJBWL

To do this, add make-scrollable to the class list of the Grid Block.

Then, add this CSS through Appearance > Customize > Additional CSS:

@media (min-width: 1025px) {
    .gb-grid-wrapper.make-scrollable {
        flex-wrap: nowrap;
        overflow-x: scroll;
    }

    .gb-grid-wrapper.make-scrollable > .gb-grid-column {
        width: unset !important;
    }

    .gb-grid-wrapper.make-scrollable > .gb-grid-column > .gb-container {
        width: 400px !important;
    }
}

[Duncan]

Oh yea that example is exactly what I was hoping for. Thank you 🙏

[Fernando]

You’re welcome, Duncan!

[Author]

Posts