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:



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!


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. 


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.