jtpettersen

Worked great! Thanks!

I have these two galleries: https://www.jtpettersen.com/home/cliffdivers https://www.jtpettersen.com/home/cosplayportraits And I have this custom CSS code to disable masonry gallery in mobile view (Since I want full width on the photos on mobile view): /* Disable masonry grid in mobile */ @media (max-width: 576px) { .gallery-masonry-wrapper { display: block !important; height: auto !important; } .gallery-masonry-item { width: auto !important; position: static !important; transform: none !important; margin-top: 1rem; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry-lightbox-link { pointer-events: none; /*disable click to prevent popup*/ touch-action: none; /*disable tap to prevent popup*/ } } My issue is this: On Desktop they both look good. But on mobile, only the Cliff Diver gallery looks correct. The Cosplay gallery seems to retain the two colum layout even on mobile. But only on one side, makin the page look weird and the photos tiny. It even happens if I duplicate the Cliff Diver page and replace the photos with the Cosplay ones. I am kinda stumped as to why I get to different results with the same layout. In short: Why does mobile view of these to pages look different? When from what I can see, they are setup identical in Squarespace. Can anyone point me in the right direction? Thomas

Thanks @jpeter, Thats great! Thomas

Thank you @jpeter, but I had to make change. Since your code targeted just that ONE set of data. And I dont want to keep adding Data sections IDs. But I just removed that and kept the .gallery-masonery-item and it seems to target all galleries now. Is that ok to do in your opinion? Or should the code be different since I want this site wide? Sorry if that was not clear in my first post. Thomas

Site URL: https://www.jtpettersen.com/ I see this is a comon question. But since there are so many different templates, I guess we all need a custom reply to this. Anyway! I would like this layout and lightbox function that I set up here to be only desktop: https://www.jtpettersen.com/home/cliffdivers But on Mobile I want this layout and NO lightbox: https://www.jtpettersen.com/home/deichmanlibrary Is it possible within Squarespace? After digging in the code, I think it has something to do with this: data-props='{ "scrollAnimation": "fade-up", "gutter": 80, "numColumns": 2, "width": "inset", "lightboxEnabled": true }' But then my knowledge runs out on how to use that in the custom CSS panel to create layout for mobile vs desktop. Can anyone help? Thanks! Thomas