View gallery block in 2 columns on mobile

I'm using lots of gallery blocks on this website and I would like for the gallery blocks to display SIDE BY SIDE on mobile rather than stacked. 

I have this code which doesn't seem to work on my end: 

// STACK GALLERY ON MOBILE // 
@media screen and (max-width:650px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
      grid-row-gap: 2vw !important;
}
}

Does anybody know where I'm going wrong? 

Can you share link to page where you use gallery?

Hi @tuanphan the page is: https://uptown.sydney/eat-and-drink

@tuanphan I have added this CSS and I didn't like it so I removed it, but the style change is still showing on my end. Do you know why this is happening? 

Thank you 

On 4/5/2024 at 10:40 AM, BUROM said:

@tuanphan I have added this CSS and I didn't like it so I removed it, but the style change is still showing on my end. Do you know why this is happening? 

 

Thank you 

 

I see you marked as resolved. Did you fix or still need help?

@tuanphan it's still happening on all the pages when viewing on mobile. 

I've deleted the css code but it still shows up. Why is it doing that? 

https://uptown.sydney/eat-and-drink

On 4/10/2024 at 11:11 AM, BUROM said:

@tuanphan it's still happening on all the pages when viewing on mobile. 

I've deleted the css code but it still shows up. Why is it doing that? 

 

https://uptown.sydney/eat-and-drink

 

 

I see it already 2 columns here

@tuanphan I know, but I don't want it on two columns anymore.. I have already deleted the code but it still shows up? Why is this happening 

On 4/15/2024 at 7:20 AM, BUROM said:

@tuanphan I know, but I don't want it on two columns anymore.. I have already deleted the code but it still shows up? Why is this happening 

 

 

To make 1 column on mobile, you can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
.gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
}
}