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
}