Image captions override my CSS borders (Carousel Slider Block)

Hi Tom,

the CSS is targeting WP image block, but the image with caption is a GB image, so even without the caption, the border will not show.

Eh… I think you can just replace the image with WP image block.

If adding caption causes the same issue, let me know, so I can see how to modify your CSS.

Hi Tom,

Do you mean the image caption’s font size?

If so, try selecting the caption block directly and adjust its properties from the block settings panel.

Try this CSS:

.swiper .wp-block-image figure {
    position: relative;
    z-index: 2;
}
/*caption text style*/
.swiper .wp-block-image figcaption {
    text-align: left;
    padding-left: 20px;
    font-size: 20px;
    margin: 0;
}
 

You can add your CSS to this:

/*caption text style*/
.swiper .wp-block-image figcaption {
    text-align: left;
    padding-left: 20px;
    font-size: 20px;
    margin: 0;
}

I’ve defined font-size, you can add font-weight, font-family and other styles you want, if you want to remove the underline, add:
text-decoration:none;

Your structure has multuple levels’ elements have overflow:hidden; which will cut off the text if position the text as your example screesnhot.

Can you remove all the overflow:hidden; from related CSS first?

Thanks! There are quite a few changes that need to be made just so the text won’t be cut off.

Try following the steps below:

1. Add this CSS, you can adjust the bottom value to play with the position of the caption.

.swiper .wp-block-image figcaption {
    position: absolute;
    bottom: -1.2em;
    z-index: 10;
}

2. Change the selectors like .wp-block-image.image-card.coral::after to .wp-block-image.image-card.coral figure::after, so do the same for other colors.

3. Change the selector .wp-block-image.image-card::after to .wp-block-image.image-card figure::after.

4. Change this css:

.cb-carousel-block .swiper, .cb-carousel-block .swiper-wrapper {
    overflow: visible !important;
    padding-right: 15px;
}

to:

.cb-carousel-block .swiper, .cb-carousel-block .swiper-wrapper {
    overflow: hidden;
    padding-right: 15px;
}

5.change this CSS:

.cb-carousel-block .swiper, .cb-carousel-block .swiper-wrapper {
    overflow: hidden;
    padding-right: 15px;
}

to this, play with min-height value to find the best fit.

.cb-carousel-block .swiper, .cb-carousel-block .swiper-wrapper {
    overflow: visible;
    padding-right: 15px;
    min-height: 380px;
}

Sorry, I didn’t paste the full CSS for #4, I’ve updated it, can you try to find the original CSS?