hc123 Posted March 13 Share Posted March 13 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
Solution Ziggy Posted March 13 Solution Share Posted March 13 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 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) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
hc123 Posted March 13 Author Share Posted March 13 Ah! Thanks. Placing it within the page header code injection worked. Ziggy 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment