Topic: How to make grid items scroll

anarchyforaardvarks
November 13, 2023 at 6:27 am

Hello, I’ve seen this discussed before and saw this suggestion:

“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”

But where are you supposed to add the grid CSS?

I am trying to make grid items turn to a horizontal scroll, like as what happens with the grid here: https://sugardaddyy.com/

How do you do that exactly – both on desktop and mobile? Thanks!
David
November 13, 2023 at 2:23 pm

Hi there,

can you share a link to your site where we can see the issue ?
anarchyforaardvarks
November 14, 2023 at 4:22 am

I’ve added a link below, thanks.
David
November 14, 2023 at 5:23 am

OK.

1. Add that CSS to your site in the Customizer > Additional CSS

2. edit your page and select the GB Grid Block, in the block settings sidebar -> Advanced -> Additional CSS classes add: scrollable

3. then select the Container Block that the Grid is inside of.
3.1 set the Spacing > Margin Left & Margin Right to auto
3.2 set the Sizing > Max Width to 1200px
anarchyforaardvarks
November 15, 2023 at 1:39 am

Hi David, thanks. I’ve just done exactly as you said –
1. I went to Appearance –> Customize –> added this Additional 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;
}
}

I copied and pasted it exactly like that on Line 1

2. I put scrollable in Additional CSS for the GP Grid Block
3. I set the spacing margin to auto and the sizing max width to 1200px for the GP Container Block

It is still not scrolling. What am I doing wrong? Thanks.
David
November 15, 2023 at 4:00 am

I am not seeing any Customizer CSS being loaded on the page.
Can you:

a) make sure the changes in the Customizer were published ( not saved as draft )
b) clear any caches on the site

Let me know
anarchyforaardvarks
November 16, 2023 at 2:28 am

Yes, I have done this three times.
anarchyforaardvarks
November 16, 2023 at 3:05 am

https://ibb.co/4WqYCVB
anarchyforaardvarks
November 16, 2023 at 3:06 am

The problem is that when I click out of that browser and go back to it, the CSS is empty once again. Could this be an issue with my customizer?
David
November 16, 2023 at 3:07 am

Can you check with your host if there is any caching on your server? OR if they can check for errors ?

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

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

How to make grid items scroll