dannyrothschild Posted September 27, 2020 Share Posted September 27, 2020 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! Link to comment
tuanphan Posted September 27, 2020 Share Posted September 27, 2020 Add to Home > Design > Custom CSS .gallery-reel-item-src { margin-left: 5px; } Milton-Creative 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
dannyrothschild Posted September 28, 2020 Author Share Posted September 28, 2020 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! Link to comment
dannyrothschild Posted September 30, 2020 Author Share Posted September 30, 2020 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! Link to comment
standardtoaster Posted February 3, 2021 Share Posted February 3, 2021 (edited) 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. Edited February 3, 2021 by standardtoaster LUDA 1 Link to comment
LUDA Posted June 14, 2021 Share Posted June 14, 2021 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! AshwinG and unavolta 2 Link to comment
Laisa Posted September 23, 2021 Share Posted September 23, 2021 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! Link to comment
tuanphan Posted September 26, 2021 Share Posted September 26, 2021 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Marzon Posted December 8, 2021 Share Posted December 8, 2021 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 Link to comment
tuanphan Posted December 10, 2021 Share Posted December 10, 2021 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Marzon Posted December 10, 2021 Share Posted December 10, 2021 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 Link to comment
tuanphan Posted December 14, 2021 Share Posted December 14, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Marzon Posted December 14, 2021 Share Posted December 14, 2021 (edited) 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; } Edited December 15, 2021 by Marzon added comments Link to comment
tuanphan Posted December 16, 2021 Share Posted December 16, 2021 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Marzon Posted December 16, 2021 Share Posted December 16, 2021 (edited) 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 ! Edited December 16, 2021 by Marzon thanking Link to comment
tuanphan Posted December 19, 2021 Share Posted December 19, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Marzon Posted December 20, 2021 Share Posted December 20, 2021 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 Link to comment
sjdeeder Posted August 29, 2022 Share Posted August 29, 2022 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; } LonniWong, addisonpann and tuanphan 2 1 Link to comment
santivdt Posted December 6, 2022 Share Posted December 6, 2022 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 .. jasbrandstudio 1 Link to comment
jasbrandstudio Posted December 9, 2022 Share Posted December 9, 2022 (edited) 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); } Edited December 9, 2022 by jasbrandstudio new information Tgrace 1 Link to comment
Tgrace Posted February 19, 2023 Share Posted February 19, 2023 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! Link to comment
Jackie123 Posted April 28, 2023 Share Posted April 28, 2023 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; } Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment