Jump to content

How to Stack just one Grid Gallery in Mobile (Brine)?

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://chihuahua-wrasse-j3yk.squarespace.com/

The default mobile composition for Brine's Grid Gallery blocks is 2 images in each row. I would like there to only be one image so they're stacked on top of each other. I found this tutorial https://christyprice.com/squarespace-tips-tricks/stack-grid-gallery-squarespace-mobile that explains how to make stacked grid galleries default or apply it to all except one, but I would like to only apply it to the grid gallery in my welcome block (the first section of my home page). I've been trying to combine block-specific tutorials with the tutorial above to no avail. 

Password to view site: edstudio

Thank you in advance!

Link to comment
  • Solution
40 minutes ago, edstudio said:

Site URL: https://chihuahua-wrasse-j3yk.squarespace.com/

The default mobile composition for Brine's Grid Gallery blocks is 2 images in each row. I would like there to only be one image so they're stacked on top of each other. I found this tutorial https://christyprice.com/squarespace-tips-tricks/stack-grid-gallery-squarespace-mobile that explains how to make stacked grid galleries default or apply it to all except one, but I would like to only apply it to the grid gallery in my welcome block (the first section of my home page). I've been trying to combine block-specific tutorials with the tutorial above to no avail. 

Password to view site: edstudio

Thank you in advance!

You may want like this


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

image.thumb.png.f5753eaee4d447085bccc20bfb5ad222.png

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, Keyword Highlighter
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
2 minutes ago, edstudio said:

@bangank36 hi again! Suddenly the code stopped working but I didn't mess with it at all. Please let me know if you can look into this! Thank you!!

It still working at the moment, maybe a cache issue on your ends?

image.thumb.png.27c62e7a3374436c213c80811cf11ab1.png

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, Keyword Highlighter
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

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.