Jump to content

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

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
  • Replies 5
  • Views 708
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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.