Jump to content

How do I force a one gallery column on mobile?

Recommended Posts

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:

935855294_Home-Desktop.thumb.jpg.c3ac5849d82d78487f076d89ec4928a8.jpg

 

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

1730691429_Home-Mobile.thumb.jpg.fb89a85deaad29485a6b8a85d2eb1ee7.jpg

 

 

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

109786068_ProjectPage-Desktop.thumb.jpg.8f2e89974f524f9e3de7cba3e0450039.jpg

 

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

1569427674_ProjectPage-Mobile.thumb.jpg.211475d775044fe4177a0df0b0de91ef.jpg

 

Thanks very much in advance!

 

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 year later...
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. 

image.png

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;
}
  }

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.