Reduce padding around slideshow gallery section

Once again, asking for other solutions for reducing padding top and bottom in a gallery slideshow. None of the above suggestions worked for me. Thanks for your help.

https://bugle-harp-k46x.squarespace.com/

password: NL385!

On 5/7/2022 at 2:28 AM, cal99 said:

Once again, asking for other solutions for reducing padding top and bottom in a gallery slideshow. None of the above suggestions worked for me. Thanks for your help.

https://bugle-harp-k46x.squarespace.com/

password: NL385!

Add to Design > Custom CSS

.gallery-slideshow {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

That custom CSS listed above doesn't work for me. Any other suggestions? I still have the same amount of excess padding. There is no change. If you look at the site, I did put in the css and you can see that it doesn't seem to work.

For reference: Height is set to 90. Width is large.  Set as Slideshow: Simple.

Can anyone help with another solution? Thank you.

On 5/12/2022 at 12:48 AM, cal99 said:

That custom CSS listed above doesn't work for me. Any other suggestions? I still have the same amount of excess padding. There is no change. If you look at the site, I did put in the css and you can see that it doesn't seem to work.

For reference: Height is set to 90. Width is large.  Set as Slideshow: Simple.

Can anyone help with another solution? Thank you.

Can you share link to page where you have problem?

The problem is on the homepage. The second image (on homepage) which is a gallery slideshow. The jpeg attachment shows the problem area of large gaps marked in yellow. Top and bottom padding for gallery slideshow. I have tried all the custom css in this thread and none of it worked to reduce padding. Your help is appreciated! Thanks.

Here is the link and password:

https://bugle-harp-k46x.squarespace.com/

password: NL385!

On 5/13/2022 at 9:08 PM, cal99 said:

The problem is on the homepage. The second image (on homepage) which is a gallery slideshow. The jpeg attachment shows the problem area of large gaps marked in yellow. Top and bottom padding for gallery slideshow. I have tried all the custom css in this thread and none of it worked to reduce padding. Your help is appreciated! Thanks.

Here is the link and password:

https://bugle-harp-k46x.squarespace.com/

password: NL385!

It looks no gap here. Did you solve it?

The problem is still there. And worse with responsive and mobile. The jpeg above shows the large gaps.

18 hours ago, cal99 said:

The problem is still there. And worse with responsive and mobile. The jpeg above shows the large gaps.

Try adding to Design > Custom CSS > then save & reload the site

@media screen and (max-width:767px) {
.gallery-slideshow {
    height: 30vh !important;
}
}

Thanks for the suggestion. I tried that custom CSS and reloaded. It still is not working. See jpg attached with new css. Yellow blocks mark extra padding areas I am trying to reduce to match spacing top and bottom of other images on the page.

Here is what my Custom CSS looks like. I have another custom css in there for a type tweak. That custom css worked. Is there anything wrong with how I am adding it? I've tried every suggestion in this thread to reduce padding and nothing works for me.

Can anyone help with this? See above two posts. Thank you!

Here is the link and password:

https://bugle-harp-k46x.squarespace.com/

password: NL385!

Is it better for me to start a new post to get help? Thanks.

2 hours ago, cal99 said:

Is it better for me to start a new post to get help?

It seems your query is very close to the original poster's issue so I don't think you need a new thread. When you post to a thread that post is bumped to the top of the list of unread messages.

Okay. I'm not getting any help at this point so I thought I'd ask.  I tried all the custom css in this post and none of it worked. I also posted a screenshot of my custom css to make sure I input it properly. Without a solution to excessive padding issues, I'm realizing I can't use the gallery slideshow feature. Thanks.

10 minutes ago, cal99 said:

I'm realizing I can't use the gallery slideshow feature.

I wouldn't give up just yet. But it wouldn't hurt to explore other options. Try to keep the gallery there for a bit so other might take a crack at it. Or point to a test page that you've set up just to try to solve this one issue.

@cal99

I just took a dive into this. Here is what I see when I look at your site on mobile emulation.

It appears to me the code is working but perhaps not at the breakpoint you want?

It did not look like that the last time I looked at it. It is better on mobile now. Why does mine make the whole image smaller than your view?  This width/size is not right.

This is desktop view. Still a bigger problem. It acts very weird in responsive.

19 hours ago, cal99 said:

Why does mine make the whole image smaller than your view?

Could it be a different browser/platform issue? Different browsers all handle rendering in their own way. Yes they follow a spec to some degree but there are variations on interpretation.

My pic was a screenshot of your page on Chrome/macOS using Chrome's DevTool's mobile emulation.

Sometimes there can be a real difference  between the emulation and viewing on an actual mobile device.

I will say that I think SS has not done the best job on this particular element in regards to spacing across viewport sizes. The spacing is extreme in some cases!

Folks, I encourage you to report this issue to SS customer support. That is the only official way they take on problems.

Please be aware that if you have custom code they will say it is not their problem. So you have to be ready to prove that it is not your custom code causing the issue.

I looked at it on the Squarespace platform in mobile and my screenshot shows the smaller image (screenshot in post). I looked at it on my iPhone and the image was also smaller. This is not correct. On desktop, the padding creates much bigger gaps and becomes even worse as the screen is resized. So, the code isn’t working. My customer is also least likely to look at mobile. On a related note, I have told the Squarespace customer service about other issues I’ve had with responsive problems. They did help me to fix one issue in the template I chose but it took a few rounds of discussion.

Unfortunately, my only work around is to substitute a gallery slideshow with a jumpy gif (shown below the slideshow as a test in my site). At least I have no large gaps in padding from the gallery slideshow format. Videos, gifs and images seem to maintain consistent spacing. Gallery slideshows do not. They also have responsive problems. No custom css seemed to fix the problem.  In the end, I may use a static image as neither looks very good.

@cal99

Nothing to add other than a data point. This is a screenshot from my iPhone. I put the image on a red background so we can see better against the posts white background

Thanks. That's how it looks on my phone too. It should go to the width and height of the image below so something is making it smaller.

Hello - I'm having a similar issue here. I want to reduce the top and bottom padding of a gallery reel. I have looked through a ton of forums and tried a handful of codes but nothing is working. Any suggestions?

On 7/29/2022 at 8:38 AM, StephanieR said:

Hello - I'm having a similar issue here. I want to reduce the top and bottom padding of a gallery reel. I have looked through a ton of forums and tried a handful of codes but nothing is working. Any suggestions?

I guest is is section padding. Can you share link to page in screenshot?

@tuanphanhttps://lettuce-grouse-aypx.squarespace.com/dessert-menu

password: denise