YC-Wang

This works so well! Thank you so much and have a nice day!

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; } }