Jump to content

Different layout and function for Desktop and Mobile.

Go to solution Solved by jpeter,

Recommended Posts

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 by jtpettersen
Link to comment
  • Solution

@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 */
  }  
}

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment
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
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

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

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.