Image gallery container issue

[Lee5 (Lee)]

I have an elfsight.com image gallery widget embedded on my webpage. I have added the CSS. I’m not sure why but the images in the gallery are displaying correctly as square images. However, the gallery seems to still be filling the space as rectangular images. So there is a lot of empty space underneath the images. Can you see from the added CSS why this is happening? .es-carousel-layout-wrapper,
.es-carousel-layout-wrapper [class*=‘CarouselItem__CarouselItemContainer-sc’] div {
/height: auto !important;/
}

.swiper {
touch-action: pan-y;
}

.eapp-photo-gallery-item-data-image {
object-fit: contain !important
}
.eapp-photo-gallery-item-data-image,
.eapp-photo-gallery-item-data-imageContainer,
.app-photo-gallery-item-data-component,
.eapp-photo-gallery-columns-item-component,
[class*=“CarouselItem__CarouselItemContainer-sc”],
[class*=“CarouselItem__CarouselItemContainer-sc”] > div,
.swiper-wrapper,
.es-carousel-layout-wrapper {
height: fit-content !important;
}

.eapp-photo-gallery-item-data-image,
.swiper-slide, .swiper-wrapper {
max-width: 950px !important
}

* Link to the page with the widget in question:

[Max]

Hi there, @Lee5

Yep, the issue occurred because of this style in the CSS code:

We’ve commented this part of the code, set the Photo Aspect Ratio to 1:1 and now the spacing isn’t displayed anymore:

Please check it out and let me know if everything is fine

[Lee5 (Lee)]

Hi Max, this works perfectly. I will amend the CSS on my other image galleries.

As always many thanks for your speedy help.

All the best, Lee

[Max]

No problem!

We’re always here to help if any difficulties arise