Jump to content

Gallery grid simple - stacking on mobile

Go to solution Solved by Ziggy,

Recommended Posts

  • Solution

Try adding this to Custom CSS:

section[data-section-id="650bbc9049897a0c6b07f9ba"] {
  .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns:repeat(5, 1fr) !important;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
41 minutes ago, margmorg said:

YES thank you so much!!! 

Glad that worked for you!

If you need this to apply to more galleries, then add the section IDs after the first one, and separate them with a comma.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 5 months later...

Hi @Ziggy thanks for all your support to so many members!

If I may, I have a similar problem with my site… I have a Simple List Gallery that I'm using to showcase client logos. I set it up for desktop, it's 6 columns by 2 rows, with a gap of 80, which looks neat on desktop. However on mobile the grid drops to 2 columns and the logos look huge! I wish to insert CSS so that I have control over the number of columns and perhaps even have control over the gap between the logo images. Could you kindly help with that?

Site: https://grouper-fiddle-acdd.squarespace.com/

Password: ZxsZ9YW7Y5tUhCU

Thanks in advance!

Link to comment
3 hours ago, ChrisMahoney said:

Could you kindly help with that?

Hi Chris! Try this Custom CSS:

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

Let me know how that goes!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
18 minutes ago, ChrisMahoney said:

is there a way to add spacing between the columns on mobile

There is currently a spacing of 4vw.

You can add this to the previous code after: grid-template-columns: 1fr 1fr 1fr !important;

    grid-column-gap: 8vw;
    grid-row-gap: 8vw;

and adjust the value.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
@media only screen and (max-width:767px) {
  .gallery-grid--layout-grid .gallery-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-column-gap: 8vw !important;
    grid-row-gap: 8vw !important;
  }
}

Try with !important

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
12 minutes ago, ChrisMahoney said:

Ah yes, the !important made the whole difference!! Thanks @Ziggy!!

Glad that worked for you!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Sorry to bother you yet again @Ziggy… that custom CSS is obviously impacting all the Gallery Grids throughout the whole website. Without success, I've tried amending the code to call on that specific Gallery Grid on the homepage only, by targeting the section, which I believe is 

section[data-section-id="65e875d24850196fae830a48"]

or even to call on the ID of that grid, which I think is

id="yui_3_17_2_1_1710174060702_540"

But I'm clearly screwing up 😅 Could you very kindly help please?

Link to comment

Try this:

section[data-section-id="65e875d24850196fae830a48"] {
  @media only screen and (max-width:767px) {
    .gallery-grid--layout-grid .gallery-grid-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr !important;
      grid-column-gap: 8vw !important;
      grid-row-gap: 8vw !important; 
    }
  }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Just now, ChrisMahoney said:

You're a star! It worked, thanks! I was placing the section id AFTER the media line, not before. Thanks again!

Glad that's working for you.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 3 weeks later...

Hi @Ziggy

I've stumbled across this forum and I'm hoping you might be able to help me please.

I'm still using 7.0, on a Brine template.

On desktop I have a simple gallery of 3 columns by 1 row.

On mobile, it stacks as 2 columns by 2 rows.

I'd like it to stack as 1 column by 3 rows, on mobile, for this particular gallery.

Could you suggest some ccs I could use to achieve this please?

All the best,

Robyn

Link to comment
13 minutes ago, RobynS said:

Could you suggest some ccs I could use to achieve this please?

Yes, most likely. Can you share your website URL and the page/gallery?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Just now, RobynS said:

This is the gallery I'd like to adjust on mobile:

Thanks for specifying! 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Try this Custom CSS:

@media screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1711466529608_35513 {
    .sqs-gallery-design-grid-slide {
      width: 100% !important;
      clear: none !important;
    }
  }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 minutes ago, RobynS said:

That's worked perfectly. Thank you so much @Ziggy!

Brilliant, glad to help.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.