Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts


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: 

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. 



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? 


Any help/insight will be greatly appreciated.  

Thank you 

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.