[Resolved] horizontal scroll container

Log In Free Support

Popular Articles

Missing style.css

Updating errors

Installing GP Premium

Installing GeneratePress

This topic has 3 replies, 2 voices, and was last updated 4 years, 9 months ago by David.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
November 20, 2020 at 1:37 am #1538583

melvin

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.

https://imgur.com/a/jzDAgiv

This is the page I use GB on

Thanks

November 20, 2020 at 3:11 am #1538657
David
Staff
Customer Support
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
November 22, 2020 at 7:00 pm #1541667

melvin

Hi David,

Thanks it work well.

Have a nice day

Regards,
Melvin

November 23, 2020 at 1:17 am #1541894

David
Staff
Customer Support

You’re welcome
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.