Jump to content

make masonry grid one column only on mobile and only on one page

Go to solution Solved by Ziggy,

Recommended Posts

Hi! I'm using a masonry grid on a few different pages on my desktop site but I want it to display in one column for only one page on mobile. I've figured this out with CSS from another post (how to make the masonry grid one column only on mobile), but I can't figure out how to apply it to only one page. I want to keep it 2 columns on all other mobile pages.

The code that works to make it one column on all pages below:

@media screen and (max-width:640px) {
figure.gallery-masonry-item {
    width: 100% !important;
    float: left !important;
    transform: unset !important;
    position: initial !important;
    display: block!important;
    padding: 0px!important;
    box-sizing: border-box;
}
figure.gallery-masonry-item img {
    width: 100% !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
}

Link to comment
  • Replies 2
  • Views 583
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution

Either add this to the page header code injection for the page you want to apply it to (wrapping in style tags). 

Or use the page collection ID in front of the code you have, and place that code in curly brackets.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

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.