[Resolved] Image Slider: how to show figcaption below image

[Author]

Posts

[mariaR-3]

Hi,
I have an image slider visible on mobile only.
I would like to show the caption text below the images, but it gets cut out. I have tried changing the overflow visibility but it breaks the slider.

What can I do to show it correctly?

This is the page with the slider (only visible on mobile): hidden link

Thank you in advance!

Best Regards,

Luca

[Nigel]

Hi Luca

I looked at your page but there already seemed to be CSS customisations in place, so I added a slider to my own test site to see what was required, and I achieved what you want with just a single padding declaration (the exact height you choose will depend on your font size etc.).

You can see in the screenshot how I manually determined what to add, which was with the following CSS style:

@media only screen and (max-width: 599px)
.tb-image-slider .glide__slide {
  padding-bottom: 61px;
}

(There are various ways you can add such custom CSS; in my case I simply added it where I had added the slider using a Custom HTML block to insert a style tag with the above, as below.)

<style media="screen and (max-width: 599px)">
.tb-image-slider .glide__slide {
  padding-bottom: 61px!important;
}
</style>

The slider worked normally with that minor adjustment.

[mariaR-3]

Thank you very much Nigel!

I was complicating it way too much then...

Cheers,
Luca