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;
}
}
YC-Wang got a reaction from Beyondspace in 1 Column on mobile devices and disable Lightbox function
