seb512

I tried using that, but I needed it to responsively adapt to the height of a column next to it. Ended up using a different plugin to do this, but all the best with your plugin and have a good day

Custom CSS Code:

/* Sets all components of image sliders to 100% of parent height */
.wp-block-kadence-advancedgallery {
    height: 100%;
}

.kb-gallery-ul {
    height: 100%;
}

.kt-blocks-carousel {
    height: 100%;
}

#splide01 {
    height: 100%;
}

#splide01-track {
    height: 100%;
}

#splide01-list {
    height: 100%;
}

.kb-slide-item {
    height: 100%;
}

.kadence-blocks-gallery-item {
    height: 100%;
}

.kadence-blocks-gallery-item-inner {
    height: 100%;
}

.kb-gallery-figure {
    height: 100%;
}

.kb-gal-image-radius {
    height: 100%;
}

.kb-gallery-image-contain {
    height: 100% !important;
}


/* Move image slider pagination to make it visible */
.splide__pagination {
    bottom: 15px !important;
}

Alright, after some trial and error, I’ve found a good enough compromise that other’s may find useful.

This is just with the Kadence Blocks plugin’s image slider block, no other plugins required (as in the end I didn’t need the Equal Height Columns plugin after all).

I inspected all the elements within the Image Slider/Carousel, and then used the WordPress Custom CSS field in the site editor to set all the inner image component heights to 100% of the parent column. I also changed the position of the navigation dots so they were on top of the images rather than hidden away beneath due to the sizing changes (All Custom CSS code is pasted in the following reply to this post for those interested).

Then ensure that the Gallery Type is set to “Slider” and that Image Ratio is set to “Inherit” in the image slider’s block settings.

Now when the image slider is in a 2 column arrangement (image slider in the left column, and description text in the right hand column, both 50% width)…

…it should be the same height as the other column for medium screen widths…

…and for larger screen widths it’ll be larger as there isn’t enough text left to match its height (I’ve coloured the right-hand column in orange just to show how the sizing works).

On smaller screens it will go into a typical stack above the description as you’d expect.

Have a good one to everyone reading this, and thanks for the support.

Nevermind, using Custom CSS with a different plugin. But keep up the good work otherwise

Thanks for the reply and I’ll take the advice onboard.

Yeah I’ll make all the images the same aspect ratio then and play around with the sizing a bit.

What I’m scratching my head about is that I use another plugin called Equal Height Columns, which works great with other elements except the image slider. Wonder if it’s possible to get this to work.

Site is working fine now, could’ve been down last night for updates (UK timezone here).

I’ve set up an image carousel (plugin is Kadence blocks, but I have tried many others) with two images on the page, and what I want is for the image carousel container to adapt to the same height as the independent product info column on the right when the screen size changes. The images inside the container should maintain their aspect ratio, and grow/shrink in height with the container.

Many thanks ??

• This reply was modified 9 months ago by seb512.
• This reply was modified 9 months ago by seb512.