jtpettersen Posted June 9, 2022 Share Posted June 9, 2022 (edited) 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 Edited June 9, 2022 by jtpettersen Link to comment
Solution jpeter Posted June 10, 2022 Solution Share Posted June 10, 2022 @jtpettersen you can try add the following css to override the styles: /* Disable masonry grid in mobile */ @media (max-width: 576px) { [data-section-id="628e36a7f2a7a51312b8d570"] .gallery-masonry-wrapper { display: block !important; height: auto !important; } [data-section-id="628e36a7f2a7a51312b8d570"] .gallery-masonry-item { width: auto !important; position: static !important; transform: none !important; margin-top: 1rem; } [data-section-id="628e36a7f2a7a51312b8d570"] .gallery-masonry-item-wrapper { height: auto !important; } [data-section-id="628e36a7f2a7a51312b8d570"] .gallery-masonry-lightbox-link { pointer-events: none; /* disable click to prevent popup */ touch-action: none; /* disable tap to prevent popup */ } } jtpettersen 1 Link to comment
jtpettersen Posted June 10, 2022 Author Share Posted June 10, 2022 8 hours ago, jpeter said: @jtpettersen you can try add the following css to override the styles: /* Disable masonry grid in mobile */ @media (max-width: 576px) { [data-section-id="628e36a7f2a7a51312b8d570"] .gallery-masonry-wrapper { display: block !important; height: auto !important; } [data-section-id="628e36a7f2a7a51312b8d570"] .gallery-masonry-item { width: auto !important; position: static !important; transform: none !important; margin-top: 1rem; } [data-section-id="628e36a7f2a7a51312b8d570"] .gallery-masonry-item-wrapper { height: auto !important; } [data-section-id="628e36a7f2a7a51312b8d570"] .gallery-masonry-lightbox-link { pointer-events: none; /* disable click to prevent popup */ touch-action: none; /* disable tap to prevent popup */ } } 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 Link to comment
jpeter Posted June 10, 2022 Share Posted June 10, 2022 Quote I dont want to keep adding Data sections IDs...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? @jtpettersen I don't see any issues removing the [data-section-id="628e36a7f2a7a51312b8d570"] parent css selector if you want the functionality to be site wide. If in the future you want to use the gallery masonry functionality for a certain section you may want to use [data-section-id] as the parent CSS selector and then use the :not CSS pseudo-class to target the individual section you don't want the CSS applied to, for example: [data-section-id]:not([data-section-id="6297513d1f1bdc42f03a918d"]) .gallery-masonry-item { } The above CSS would apply styles to elements that match [data-section-id] .gallery-masonry-item. However, it wouldn't apply the css for elements that matched the [data-section-id="6297513d1f1bdc42f03a918d"] CSS selector. That's what's powerful about the :not CSS pseudo-class jtpettersen 1 Link to comment
jtpettersen Posted June 12, 2022 Author Share Posted June 12, 2022 Thanks @jpeter, Thats great! Thomas 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