Adding space between images in Slideshow Reel gallery

Site URL: https://www.dannyrothschild.com/design/posters

Hello, I'm trying to figure out how to add spacing between images in my slideshow reel gallery on Squarespace 7.1.

Every option I've found so far cuts off a portion of the image, and when viewed on phones, the images are no longer centered. I don't need to add any padding on top or bottom, just between the images, but without cropping them. Anybody know how to do this? Thanks!

Add to Home > Design > Custom CSS

.gallery-reel-item-src {
    margin-left: 5px;
}

Hi @tuanphan, that code crops the right side of the images by 5px. Is there any code that adds white space without cropping any images? Thank you!

On 9/27/2020 at 3:08 PM, tuanphan said:

Add to Home > Design > Custom CSS

.gallery-reel-item-src {
    margin-left: 5px;
}

 

Is there code that will not crop the pictures? This crops 5px from the right side of the previous image. Thank you!

Hi, I am having this same problem with no solution yet... Anyone able to help? Just switched to Squarespace and I find it incredibly restricted on how to customize things... If it's all supposed to be visual and easy for anyone to use, just add a padding slider to the gallery block settings, right??

Thanks in advance!

https://innovativeintensity.squarespace.com/ bottom of the page. I need to add more spacing between these logos.

Hi, i'm not a developer or anything but I think I've found my own personal solution i'd like to share with you. Only because it took me hours of trial and error to find the right soultion.

Basically, from what I can tell. 7.1 is using a sort of "container" to hold the images in which it reels through the gallery. Probably changing things like padding might just be changing the container as opposed to the image size itself. With that being said, trail and error, I figured why not just change the .gallery-reel-item img as opposed to the src or even gallery. Anyways, basically resizing the inner image within gallery-reel-item.

Code found below to what I believe basically resized the inner image a bit to give your images more visual space in between them. If they end up to small then just enlarge the size of the gallery.

 

.gallery-reel-item img {
  width: 100%; ///change percentage to a smaller value in order to resize
  height: auto;

}

the height set to auto to allow for scaled transformation. Hopefully this helps.

On 9/27/2020 at 9:57 AM, dannyrothschild said:

Site URL: https://www.dannyrothschild.com/design/posters

Hello, I'm trying to figure out how to add spacing between images in my slideshow reel gallery on Squarespace 7.1.

Every option I've found so far cuts off a portion of the image, and when viewed on phones, the images are no longer centered. I don't need to add any padding on top or bottom, just between the images, but without cropping them. Anybody know how to do this? Thanks!

Hey everyone, I've tried them all but keep having issues, some pictures are scaled perfectly but others are suddenly bigger? Could I fix it, you think @LUDA? I've added an example of my reel, hope someone can help me. I would really love to have some space between the photos. 

thanks a lot!

On 9/23/2021 at 6:43 PM, Laisa said:

Hey everyone, I've tried them all but keep having issues, some pictures are scaled perfectly but others are suddenly bigger? Could I fix it, you think @LUDA? I've added an example of my reel, hope someone can help me. I would really love to have some space between the photos. 

thanks a lot!

Can you share link to page in screenshot? We can take a look

On 9/26/2021 at 4:00 AM, tuanphan said:

Can you share link to page in screenshot? We can take a look

Bringing attention back to this thread. I too am looking for a solution. So far all the similar posts I've found regarding adding white spaces between gallery reel images ends up cropping them. @LUDA seemed like they got the closest but it doesn't seem to be fully working. 

The site I am looking to do this on is:
https://llama-scarlet-7jfe.squarespace.com/all/new-portfolio-item-tzlnh

On 12/9/2021 at 12:18 AM, Marzon said:

Bringing attention back to this thread. I too am looking for a solution. So far all the similar posts I've found regarding adding white spaces between gallery reel images ends up cropping them. @LUDA seemed like they got the closest but it doesn't seem to be fully working. 

The site I am looking to do this on is:
https://llama-scarlet-7jfe.squarespace.com/all/new-portfolio-item-tzlnh

The url doesn't exist

22 minutes ago, tuanphan said:

The url doesn't exist

My bad @tuanphan, the seo had changed. 

https://llama-scarlet-7jfe.squarespace.com/all/pitesti-business-center

On 12/11/2021 at 6:53 AM, Marzon said:

My bad @tuanphan, the seo had changed. 

https://llama-scarlet-7jfe.squarespace.com/all/pitesti-business-center

Hi. Still doesn't exist. Can you check it again?

On 12/14/2021 at 7:03 AM, tuanphan said:

Hi. Still doesn't exist. Can you check it again?

https://llama-scarlet-7jfe.squarespace.com/projects/pitesti-business-center

Yes, here it is

EDIT: I'm currently using this code below. But this is not a solution for me, as it shifts the images to one side as well as crops them, both of which I'm trying to avoid if possible. 

I also tried scaling the images. However because they are different sizes, it caused problems like @Laisa discovered above.

.gallery-reel-item img {
    margin-left: 20px;
}

On 12/14/2021 at 8:51 PM, Marzon said:

https://llama-scarlet-7jfe.squarespace.com/projects/pitesti-business-center

Yes, here it is

EDIT: I'm currently using this code below. But this is not a solution for me, as it shifts the images to one side as well as crops them, both of which I'm trying to avoid if possible. 

I also tried scaling the images. However because they are different sizes, it caused problems like @Laisa discovered above.

.gallery-reel-item img {
    margin-left: 20px;
}

 

Remove margin & use border

figure.gallery-reel-item {
    border-left: 5px solid white;
    border-right: 5px solid white;
}

12 hours ago, tuanphan said:

Remove margin & use border

figure.gallery-reel-item {
    border-left: 5px solid white;
    border-right: 5px solid white;
}

 

So, unfortunately this still crops and moves the images to one side, after testing the code with large 70px borders instead of 5px. This is similar, if not the same, to moving the margin left as I've seen in other posts. 

It seems this is perhaps impossible or would require a lot of scripting to be able to do. ?

Thank you for the help though @tuanphan . Adding the borders did help with the mobile version. With small margins I can live with this. But Squarespace really needs to add white space between gallery images in the reel !

On 12/17/2021 at 3:20 AM, Marzon said:

So, unfortunately this still crops and moves the images to one side, after testing the code with large 70px borders instead of 5px. This is similar, if not the same, to moving the margin left as I've seen in other posts. 

It seems this is perhaps impossible or would require a lot of scripting to be able to do. ?

Thank you for the help though @tuanphan . Adding the borders did help with the mobile version. With small margins I can live with this. But Squarespace really needs to add white space between gallery images in the reel !

You  can set 5px for mobile, higher for desktop, what do you think?

On 12/18/2021 at 9:25 PM, tuanphan said:

You  can set 5px for mobile, higher for desktop, what do you think?

Nah it's ok it looks fine

I found a solution via CSS on YouTube that worked for me. Wanted to share! 

FOR SQSP 7.0:

.sqs-gallery-design-strip-slide {
padding-right:10px;
margin-left:10px;
margin-top:0px;
margin-bottom:0px;
border-right: 1px solid #dcdcdc;
}

FOR SQSP 7.1:

.gallery-reel-item img {
padding:10px;
margin-left:10px;
margin-top:0px;
margin-bottom:0px;
}

Also trying to figure this out to create a logo slider with some margin between the logo's that slides smoothly .. really weird that that is not a build-in function. All of the above don't work for me for some reason .. 

On 12/6/2022 at 11:54 AM, santivdt said:

Also trying to figure this out to create a logo slider with some margin between the logo's that slides smoothly .. really weird that that is not a build-in function. All of the above don't work for me for some reason .. 

I'm seeking help for this purpose also. None of the solutions above work as anything that crops the logos isn't an appropriate option.

Edit: this seems to offer somewhat of a solution when working with logos: 

.gallery-reel-item img {
    transform: scale(.9);
}

On 12/10/2022 at 8:24 AM, jasbrandstudio said:

I'm seeking help for this purpose also. None of the solutions above work as anything that crops the logos isn't an appropriate option.

 

Edit: this seems to offer somewhat of a solution when working with logos: 

.gallery-reel-item img {
    transform: scale(.9);
}

 

This worked for me! Thank you!

On 8/29/2022 at 12:18 PM, sjdeeder said:

 

I found a solution via CSS on YouTube that worked for me. Wanted to share! 

FOR SQSP 7.0:

.sqs-gallery-design-strip-slide {
padding-right:10px;
margin-left:10px;
margin-top:0px;
margin-bottom:0px;
border-right: 1px solid #dcdcdc;
}

FOR SQSP 7.1:

.gallery-reel-item img {
padding:10px;
margin-left:10px;
margin-top:0px;
margin-bottom:0px;
}

This still crops for me.  This works with no cropping:

.gallery-reel-item img {
  width: 90% !important;
  height: auto !important;
}