Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

1 Column on mobile devices and disable Lightbox function


YC-Wang

Question

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;
}
}
Link to comment

4 answers to this question

Recommended Posts

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

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
Posted (edited)
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!

Edited by YC-Wang
Link to comment
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

@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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...