Jump to content

1 Column on mobile devices and disable Lightbox function

Recommended Posts

Posted

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!
 
 
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;
}
}
  • Replies 4
  • Views 550
  • Created
  • Last Reply
Posted
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!
 
 
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;
}
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Posted
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!

Posted
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Posted

@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

elephant-carrot-yfha.squarespace.com-01-

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

elephant-carrot-yfha.squarespace.com-02-

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.