Jump to content

CSS for changing gallery type on single page

Go to solution Solved by Beyondspace,

Recommended Posts

I've added css to convert all galleries on my site from grid to stacked when viewed on mobile (see css below). Unfortunately this has created an undesired look on my mobile "about" page. How can I modify this css or add more to keep the original grid layout for only the "about" page on mobile? Thank you in advance.

Page link: https://grahamroper.com/about
Password: utah

/* stack gallery grid on mobile */

 @media only screen and (max-width: 640px)
  {.sqs-gallery-design-grid-slide {
      width: 100% !important;
      clear: none !important;
  }
  }

Link to comment
17 hours ago, GrahamRoper said:

I've added css to convert all galleries on my site from grid to stacked when viewed on mobile (see css below). Unfortunately this has created an undesired look on my mobile "about" page. How can I modify this css or add more to keep the original grid layout for only the "about" page on mobile? Thank you in advance.

Page link: https://grahamroper.com/about
Password: utah

/* stack gallery grid on mobile */

 @media only screen and (max-width: 640px)
  {.sqs-gallery-design-grid-slide {
      width: 100% !important;
      clear: none !important;
  }
  }

You can change your code to this

/* stack gallery grid on mobile */

@media only screen and (max-width: 640px){
  #block-yui_3_17_2_1_1676869686592_8178 .sqs-gallery-design-grid-slide {
    width: 100% !important;
    clear: none !important;
  }
}

Support me by pressing 👍  or marking as solution if this is useful for you

Greeting, it's 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, Lightbox Studio plugin
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
7 hours ago, Beyondspace said:

You can change your code to this

/* stack gallery grid on mobile */

@media only screen and (max-width: 640px){
  #block-yui_3_17_2_1_1676869686592_8178 .sqs-gallery-design-grid-slide {
    width: 100% !important;
    clear: none !important;
  }
}

Support me by pressing 👍  or marking as solution if this is useful for you

Unfortunately that didn't work. That changed all my mobile galleries back to grid instead of stack, EXCEPT the "about" page gallery. So basically the inverse of what I'm going for. I'm guessing you isolated the "about" page gallery block?

Link to comment
  • Solution
16 hours ago, GrahamRoper said:

Unfortunately that didn't work. That changed all my mobile galleries back to grid instead of stack, EXCEPT the "about" page gallery. So basically the inverse of what I'm going for. I'm guessing you isolated the "about" page gallery block?

Ohh, it 's my bad. You can try the following one

/* stack gallery grid on mobile except About page*/

@media only screen and (max-width: 640px){
  body:not(#collection-63f2f994f2c62a3fadc044d3) .sqs-gallery-design-grid-slide {
    width: 100% !important;
    clear: none !important;
  }
}

Support me by pressing 👍 or marking as solution if this is useful for you

Greeting, it's 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, Lightbox Studio plugin
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
On 3/3/2023 at 8:51 AM, Beyondspace said:

Ohh, it 's my bad. You can try the following one

/* stack gallery grid on mobile except About page*/

@media only screen and (max-width: 640px){
  body:not(#collection-63f2f994f2c62a3fadc044d3) .sqs-gallery-design-grid-slide {
    width: 100% !important;
    clear: none !important;
  }
}

Support me by pressing 👍 or marking as solution if this is useful for you

That solved it. I greatly appreciate your help!

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

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.