How do I force a one gallery column on mobile?

Site URL: https://coconut-lobster-36me.squarespace.com/

Hi! I was wondering if someone could help me with a site I'm pulling together

URL: https://coconut-lobster-36me.squarespace.com/

Password: izette

I have some Project Pages with galleries on (with 2 or 3 columns on desktop). It would be great if these could be just one column on mobile.

Currently the homepage exhibits this behaviour as desired but I wondered if it could be replicated with custom CSS for the Project Pages. Pretty much the opposite of this!

Here's the homepage on desktop:

Here's the homepage on mobile looking good with the one column:

Here's a Project Page on desktop - fine with 3 columns:

Here's a Project Page on mobile... Ideally this would be just the one column.

Thanks very much in advance!

Add the following to Design > Custom CSS.
 

@media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) {

  .gallery-grid-wrapper {
  
    grid-template-columns : 1fr !important;
    
    }
  }

This is for v7.1.

Let us know how it goes.

Thanks so much!! It works perfectly. 👏

Now these images are optimised for mobile 'feed' view - pretty much full screen, I don't think the lightbox adds any value really.

So I've just made a new post: do you know if there's custom CSS to disable the lightbox for mobile only?

If it's tricky, I may just disable the lightbox completely, sacrificing it on desktop too.

Cheers

I was running into the same issue and this code worked perfectly. As a follow up I was wondering if anyone knows how I could add a little more vertical space between the gallery images while in mobile view? It currently looks like this. 

On 3/7/2023 at 12:19 PM, Jordan22 said:

I was running into the same issue and this code worked perfectly. As a follow up I was wondering if anyone knows how I could add a little more vertical space between the gallery images while in mobile view? It currently looks like this. 

Try change code to this

@media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) {

  .gallery-grid-wrapper {
  
    grid-template-columns : 1fr !important;
    
    }
figure {
	margin-bottom: 20px !important;
}
  }

I'm trying this on 7.1 but for me it doesn't work. You can check jiwajiwa.com/sekan/photography/indonesia

On 3/27/2023 at 12:47 PM, sekan said:

I'm trying this on 7.1 but for me it doesn't work. You can check jiwajiwa.com/sekan/photography/indonesia

It looks fine to me