1 Column on mobile devices and disable Lightbox function

Site URL: https://elephant-carrot-yfha.squarespace.com/

13 minutes ago, YC-Wang said:

Site URL: https://elephant-carrot-yfha.squarespace.com/

I want to keep the desktop view of the website, which is 3 column grid-masonry, while making the mobile view of the website to be 1 column only.

I checked the forum and found some custom css solution, tried one and it worked but there is no space between images.  I want to have a margin between the items (at the moment they are all touching with no margin / padding.

 

Also, I would like to enable Lightbox function on destop view and disable it on mobile view. Tried the code I found in the forum but doesn't work well. It disabled lightbox function of 1 page but not every page.

 

Any help is appreciated! Thanks!

 

My website: https://elephant-carrot-yfha.squarespace.com/

 

Codes that I tried:

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

 

/* disable lightbox on mobile */

@media only screen and (max-width: 600px) {
.gallery-grid-lightbox-link {
  pointer-events: none;
}
}

try

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
    padding: 1em;
    box-sizing: border-box;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
 
/* disable lightbox on mobile */
@media only screen and (max-width: 767px) {
.gallery-masonry-lightbox-link {
  pointer-events: none;
}
}

31 minutes ago, bangank36 said:

try

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
    padding: 1em;
    box-sizing: border-box;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
 
/* disable lightbox on mobile */
@media only screen and (max-width: 767px) {
.gallery-masonry-lightbox-link {
  pointer-events: none;
}
}

 

This works so well!

Thank you so much and have a nice day!

3 minutes ago, YC-Wang said:

This works so well!

Thank you so much and have a nice day!

Each lightbox link has different class name

.gallery-masonry-lightbox-link

@YC-Wang

I see some errors on your site

Site URL: https://elephant-carrot-yfha.squarespace.com/

1. (21:9) You haven’t changed SEO title so browser tab name still show “Gallery 1”

https://elephant-carrot-yfha.squarespace.com/21-9

2. (Mobile – Footer) Want to make footer links and copyright on the same line (As on tablet, desktop)