Jump to content

Change masonry gallery section to display one column in mobile or change order of images in mobile columns

Go to solution Solved by Ziggy,

Recommended Posts

Hello,

I've noticed recently that Squarespace changes the order of the masonry gallery sections in mobile view - well the order isn't changed but the gallery is collapsed into two columns which makes it appear that the order has changed and the images that are supposed to sit next to each other no longer do. Please see example from my client's website here.

I saw another thread on forcing masonry galleries to display as one column on mobile view but these CSS solutions are not working for me on this site... If anyone has any other ideas, would be very grateful!

 

 

Link to comment
  • Solution
Posted (edited)

Try this Custom CSS:

@media screen and (max-width: 767px) {
  .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    columns: 1 !important;
  }
  .gallery-masonry-item img {
    width: 100% !important;
  }
}

 

Edited by Ziggy

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
1 hour ago, SourceProjects said:

Just a pity we can't seem to have. a masonry gallery mobile view that works the same way as in a grid gallery in mobile so images show in the order they're supposed to...  But this one-column solution is brilliant for now! 🙏

The order in a masonry gallery is always funky as it's trying to fit all of your images together.

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.