[Resolved] horizontal scroll container

[melvin wang]

Hi,

Can i possibly achieve the below? Instead of becoming 2 row in mobile, I wish to achieve become 1 row in mobile with horizontal scroll.

View post on imgur.com

This is the page I use GB on

Thanks

[David]

Hi there,

try adding this CSS:

@media(max-width: 769px) {
    .gb-grid-wrapper.scrollable {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: mandatory;
    }
    .gb-grid-wrapper.scrollable .gb-grid-column {
        flex: 1 0 50%;
        scroll-snap-align: start;
    }
}

Then edit the Grid Container ( the parent wrapped ) and give it a CSS Class of: scrollable

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[melvin wang]

Hi David,

Thanks it work well.

Have a nice day

Regards,
Melvin

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts