Jetpack slideshow doesn’t adjust height

Hi there

I can see the issue you mentioned on your site, however in testing this on a test site, the behaviour is different. If you slide from a landscape image to a portrait image, the slideshow height stays the same and the image width is reduced accordingly (the same as it works on desktop).

I’m not sure why it’s working differently on your site. Have you made any customizations that might have changed the slideshow behaviour?

My sincerest apologies. You are quite right. Just went through my stylesheet and discovered I made an adjustment when I had another slideshow consisting only of portrait images, I wanted to display in full height. When having captions on a portrait image it covers too much of said image. so I added the

.wp-block-jetpack-slideshow_swiper-wrapper {
height: 100%

to my css, not knowing that it would affect the kind of slideshow I mentioned in my first post.

I am very sorry for the inconvenience! I have deleted my css customisation – but can only hope in a future jetpack update that this feature may be included?

Kind regards, Maj-Britt Permien – European Travel Magazine

Hi again

I just wanted to let you know another reason for my edit of the stylesheet, to know if you see the same on your test site:

Having a slideshow of different height photos, do you – on the mobile screen – see a space between the paragraph or heading above the slideshow and the slideshow itself?? Whereas my stylesheet alteration resulted in a space underneath the photos, it seems that without any customisation there’s a space above. It looks wrong on both Safari and Chrome browsers.

I have tried to remove all customisation to my site to see if something may inadvertently affect it, but even without all my css additions, there’s still a space..

Can you confirm the same in your test site?

I really hope you can help me, I’m at my wit’s end.

In my article – even after I’ve removed all slideshow styling – there is still difference of the height of the slideshows. What I mean is, the first slideshow MAY look alright (sometimes it does, sometimes it doesn’t), but the next one has a huge gap between the title, the photo, the captions and progress icons.

It just doesn’t make any sense why the slideshows look so different! Is it because there are more slideshows in one post?) Even on this one I just tested, the first or second slideshow may look OK, but the next ones look really bad: https://www.e-travelmag.com/croatia/books-media-hr/

And that’s on Desktop AND Mobile I’m experiencing these problems.

Hope you can help – before I go mad!

Kind regards,

Maj-Britt, European Travel Magazine

Hi there

I haven’t been able to reproduce the issue you mentioned with the slideshows. Have you tried adding the affected slideshows to a separate test page on their own, to confirm whether the issue is with having multiple slideshows on one page?

Hi again Dan and many thanks for getting back to me

When you say you haven’t been able to reproduce the issue, do you mean that you can’t see the issue in the articles I’ve linked to? Or that you can’t reproduce them in your own environment?

I have found an article, where I only have one slideshow: https://www.e-travelmag.com/portugal/pinela-potter/

The insane thing is; when you are looking at the slideshow section (that is in the top) when the site loads, it looks fine. If you however scroll down to the bottom of the page, then refresh the webpage and scroll up again to look at the slideshow, it looks exactly as crappy as on the web pages I’ve previously mentioned.

What could cause that kind of behaviour?

I can see the issue on your site, but I haven’t been able to reproduce it on a test site, which suggests that something else on your site may be conflicting.

At this point I’d suggest checking for a theme/plugin conflict using the Health Check plugin as explained here:

https://woocommerce.com/document/troubleshooting-using-health-check/

Hopefully that will help you identify a conflicting theme or plugin.

Hi again Dan

Thanks for the suggestion. But, alas, unfortunately to no avail.

I went into “troubleshooting mode” and enabled a default theme and only Jetpack plugin. And just like on the live site; the first (and MAYBE second) slideshow I see is shown correct, but the next have this wide gap in the top or bottom.

Any other suggestions I could try?

Thanks in advance for any help given!

// Maj-Britt

Heureka Dan, I found the issue of the problem!!

After disabling “lazy loading” for images in jetpack, all slideshows are now displayed correctly.
Phew! That felt good. Mental health restored: check!

Thanks for all your help and patience

// Maj-Britt, European Travel Magazine

BUUUT I just found that the problem persists on Mobile screens: The first slideshow looks OK but the next ones still have wide gap between image and “process bullets”.

Any suggestions?

// Maj-Britt

Hi @eutravelmag

I know this has been frustrating for you! I’m not sure what this could be, but it is almost certainly something with your site’s configuration. Like my colleague Dan, I wasn’t able to reproduce this on a test site. I created two different posts, one with a single slideshow and one with multiple slideshows, and text between the slideshows on each. In both Safari and Ghostery on iPhone, there is no space between the slideshow itself and the navigation dots on my test posts. I also used a non-default theme to test, just to be sure.

I know you’ve mentioned that you’ve done troubleshooting with your theme and your plugin, but there is still something on your site that is interfering, and I’m afraid we’re at the limit of what we can do for you here in the forums. You might consider posting an issue on Jetpack’s GitHub repo, but you’d need to make sure to include very detailed steps to reproduce.

Hi there,

It has been more than one week since we have heard from you, so I’m marking this topic as resolved.

But if you have any further questions or need some more help, you’re welcome to reply here or open another thread.