⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ua-cam.com/video/euJqHXs_L1M/v-deo.html
Is there a way to zoom out on a reel for mobile. I was hoping there was a way to keep the same size of the gallery for mobile but kinda zoom out so you can see multiple photos in the reel. Right now it seems for mobile it only shows 1 image and then the arrows. Is there a way to use css to make it show 2 or 3 photos like it looks for desktop?
Great question and yes - you can! Use the data section id to customize one section at a time. Here is an article on my site with more info: www.insidethesquare.co/squarespace-id-finder
@InsideTheSquare I noticed Gallery Slideshow Simple has quite a bit of padding, especially on mobile. Do you have a snippet to reduce padding for this type of slideshow?
Hi Rebecca, I don't see the 'Reels', 'Full Screen', etc. I'm using a 'Carousel' view as design. With this one I can't seem to use your code to adjust the images on Mobile Version (I'm using a mix of vertical and horizontal pictures, but the horizontal ones are also shown in vertical, but blown up). Do you have any solution for me?
Carousel was a giveaway - you're using a list section, not a gallery section. I wish Squarespace would label those better because they are so different and it's really confusing for all of us. You're selectors are different and I don't have a tutorial for that just yet, but I will add it to my to do list, so stay tuned!
Great question! To create code that only applies to a smaller screen, you can use a media query. Check out this article for more info: insidethesquare.co/mobile
Hey @insidethesquare, do you have a version for this but for Desktop? I'm trying to resize a gallery carousel to have a 1:1 ration but struggling to figure out the code for it!
That's a great question! Kinda wild that image ratio isn't a setting in a slideshow:simple gallery 🫠 I whipped up a quick code for ya; play around with the values until it's perfect for your site. Quick pro tip: marign:auto is what centers the image. .gallery-slideshow-item img{ object-fit:cover!important; height:80vh!important; width:80vh!important; margin:auto!important }
@@GabyLevine If that didn't work, you might be using a different gallery section type. Send me a link and I'll take a look. If your site isn't live, set it to password protected under settings > site availability. Email me a link: support-at-insidethesquare.co
This code works perfectly in Squarespace when viewed on mobile devices: css @media only screen and (max-width:767px) { .gallery-slideshow-item-wrapper, .gallery-slideshow-item img { width: 100vw !important; object-fit: cover; left: 0 !important; } } However, when I add height: 100vh to ensure the images occupy the full screen height, they start overlapping the section above. Does anyone have suggestions on how to resolve this?
@@InsideTheSquare hi there!! tried to add a line to do something similar to op, but complete noob so no luck. basically, i've put in the code for the" simple slide show"set to 50wh and while the images resized as i wanted. the gallery section is still tall as before. and the slide cursor are aligned with the " box" meaning they're too low. hope you can help! your vids are saving me big time, thanks! EDIT: i actually did it by removing "item wrapper" from the 2nd line! hurrayy!
love your tutorials but when i copy and paste the reel code, I get a syntax error on line 4(Height50vh!... line? Any idea why? /* - - Gallery Reel - - */ @media only screen and (max-width:767px) { .gallery-reel{ Height:50vh!important } .gallery-reel-item{ height: inherit!important } }
OMG i am mortified, thought i'd copy and pasted the code but must have deleted the h then added H@@InsideTheSquare . Your tutorials are super useful, thx so much
⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ua-cam.com/video/euJqHXs_L1M/v-deo.html
Thanks!
You're welcome! ☺️
Is there a way to zoom out on a reel for mobile. I was hoping there was a way to keep the same size of the gallery for mobile but kinda zoom out so you can see multiple photos in the reel. Right now it seems for mobile it only shows 1 image and then the arrows. Is there a way to use css to make it show 2 or 3 photos like it looks for desktop?
Great question! I don't have a code for that right now, but I will definitely add it to my tutorial to do list :)
@@InsideTheSquare thanks!
Can you adjust the height of individual gallery reels if you have multiple?
Great question and yes - you can! Use the data section id to customize one section at a time. Here is an article on my site with more info: www.insidethesquare.co/squarespace-id-finder
@InsideTheSquare I noticed Gallery Slideshow Simple has quite a bit of padding, especially on mobile. Do you have a snippet to reduce padding for this type of slideshow?
Interesting! i don't have a tutorial for that yet, but I'll be sure to add it to my to do list.
Thank you!
You're welcome! ☺️
Hi Rebecca, I don't see the 'Reels', 'Full Screen', etc. I'm using a 'Carousel' view as design. With this one I can't seem to use your code to adjust the images on Mobile Version (I'm using a mix of vertical and horizontal pictures, but the horizontal ones are also shown in vertical, but blown up). Do you have any solution for me?
Carousel was a giveaway - you're using a list section, not a gallery section. I wish Squarespace would label those better because they are so different and it's really confusing for all of us. You're selectors are different and I don't have a tutorial for that just yet, but I will add it to my to do list, so stay tuned!
Hi Rebecca, what code can I use to change the row height of a Grid Strip gallery on mobile only?🙏🏼
Great question! To create code that only applies to a smaller screen, you can use a media query. Check out this article for more info: insidethesquare.co/mobile
Can this applied to a gallery block with a title and description below it for desktop and mobile?
This tutorial might be more helpful: insidethesquare.co/squarespace-tutorials/gallery-caption
Hey @insidethesquare, do you have a version for this but for Desktop? I'm trying to resize a gallery carousel to have a 1:1 ration but struggling to figure out the code for it!
That's a great question! Kinda wild that image ratio isn't a setting in a slideshow:simple gallery 🫠 I whipped up a quick code for ya; play around with the values until it's perfect for your site. Quick pro tip: marign:auto is what centers the image.
.gallery-slideshow-item img{
object-fit:cover!important;
height:80vh!important;
width:80vh!important;
margin:auto!important
}
@@InsideTheSquare Thank you for doing that! I tried the code but it unfortunately didn't work 😥 Any other suggestions?
@@GabyLevine If that didn't work, you might be using a different gallery section type. Send me a link and I'll take a look. If your site isn't live, set it to password protected under settings > site availability. Email me a link: support-at-insidethesquare.co
@@InsideTheSquare Heya! Just tried to email you but the email wasn't recognised, not sure why? Sorry!
@@GabyLevine you've got to replace the -at- with the @ symbol. I don't type my full email in comments because of spam bots 🤖
Is it possible to change a full slideshow into gallery strips on mobile?
Hey Adam! I answered your email about this, but wanted to share the solution for anyone else who is wondering: ua-cam.com/video/AQnwhitEqnI/v-deo.html
Can this work with 7.0
Unfortunately not; page sections are not a feature available in version 7.
This code works perfectly in Squarespace when viewed on mobile devices:
css
@media only screen and (max-width:767px) {
.gallery-slideshow-item-wrapper, .gallery-slideshow-item img {
width: 100vw !important;
object-fit: cover;
left: 0 !important;
}
}
However, when I add height: 100vh to ensure the images occupy the full screen height, they start overlapping the section above. Does anyone have suggestions on how to resolve this?
I do! 🙋♀️ The “img” selector in the code applies it to the entire image. Write another line for the gallery itself and set that to 100vh too.
@@InsideTheSquare hi there!! tried to add a line to do something similar to op, but complete noob so no luck. basically, i've put in the code for the" simple slide show"set to 50wh and while the images resized as i wanted. the gallery section is still tall as before. and the slide cursor are aligned with the " box" meaning they're too low. hope you can help! your vids are saving me big time, thanks! EDIT: i actually did it by removing "item wrapper" from the 2nd line! hurrayy!
love your tutorials but when i copy and paste the reel code, I get a syntax error on line 4(Height50vh!... line? Any idea why?
/* - - Gallery Reel - - */
@media only screen and (max-width:767px) {
.gallery-reel{
Height:50vh!important
}
.gallery-reel-item{
height: inherit!important
}
}
Try making the "h" lower case 😉
OMG i am mortified, thought i'd copy and pasted the code but must have deleted the h then added H@@InsideTheSquare . Your tutorials are super useful, thx so much