Jump to content

Change Gallery Layout Section settings for mobile version of site only/

Go to solution Solved by tuanphan,

Recommended Posts

Hi 

My website/portfolio makes use of gallery sections to display 3 thumbnails as well as the project title and the director's name. 
I am very happy with the way this works on desktop but it looks really messy on mobile. 

I was hoping to find out whether there was a way to add custom code to display the galleries using different settings on mobile.  

This is how it displays on desktop with 3 thumbnails side by side: 
image.thumb.png.654c215585f33ae690d0d2c6aa455f36.png

On mobile it turns into a mess like below: 
I would instead prefer it to scale the thumbnails down but retain the layout of 3 thumbnails side by side, like an instagram grid. 

 
image.thumb.png.2454c61c9437d031f499ea43e16bcd5f.png

 

If that isn't possible, perhaps having them show up in a single column without captions is the best option?  How do I do this without affecting the desktop version? 

image.thumb.png.a2512e87701db9cf57e62d915c31c5af.png

Any help/insight will be greatly appreciated.  

Thank you 
D

Link to comment
  • Replies 4
  • Views 342
  • Created
  • Last Reply

Top Posters In This Topic

On 5/1/2023 at 4:08 AM, tuanphan said:

Add this to Design > Custom CSS

/* Mobile 3 columns */
@media screen and (max-width:991px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
}

 

thank you so much! 

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.