Different layout and function for Desktop and Mobile.

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

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

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

Thanks @jpeter, Thats great!

Thomas