Issue with Image Carousel

Hi,

I have set up an image carousel on my website homepage (www.hoteltvcompany.co.uk) with logos of our customers. A couple of weeks ago i started having an issue with the carousel - it looks ok on the Elementor builder menu but it adds an awkward gap on the actual page.

This is how it looks on the back end (it used to look like this on the front as well)

And this is how it looks on the front end now (it added an awkward white gap)

How can i remove the gap?

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .elementor-element-6b79c51 .elementor-image-carousel-wrapper {
      max-height: 60px !important;
    }

and see how it works.

You would probably adjust the element number (6b79c51) when page’s layour changed.

Regards,
Kharis
aThemes Support

That works perfectly! Thanks

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support

Hi,

I have an issue with this again. I updated the theme today and i started getting the same white gap under the carousel.

I have used the css you sent me and it looks fine on the preview, but when i publish and go to the front end i get the same gap again. Any ideas how can i fix this?

Hello there,

It looks like the class name .elementor-element-6b79c51 on the carousel element has changed as the page updated.

To apply consistent style, you would add a custom class name to the row where your carousel resides in. Then use this CSS code:

    .your-section-class-name .elementor-image-carousel-wrapper {
      max-height: 60px !important;
    }

Regards,
Kharis
aThemes Support

Sorry, I’m a bit confused. How do i add a custom class name to the row ?

Hello there,

Visit this documentation that might be helping to explain it better.

Regards,
Kharis
aThemes Support