Disable Lightbox Gallery on Mobile

There may be a situation where you want to disable the Lightbox option on mobile, but keep it enabled on desktop.

Step 1. 

Identify the breakpoint where desktop mode changes to mobile mode. The easiest way to determine this 'width' value is to use Chrome Developer Tools. Generally, 640 is a width that Squarespace commonly uses. If the breakpoint is 640, then we will use "max-width" of 639px as our CSS media query.

Step 2.

The following CSS will target ONLY Gallery Blocks with Grid style and Lightbox enabled. The data-block-json attribute is looking for the Lightbox checkbox.

@media (max-width: 639px) {
  .sqs-block-gallery[data-block-json*='"lightbox":true'] {
    .sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor {
      pointer-events: none; 
    }
  }
}