On the above page, I have a Carousel in Flickity style set up with Nectar Shortcodes. I need all my slide items to have same height, and have added "carousel-cell" class to all slider cells. I have the following CSS code in the page setting:
I made a few changes and with the following CSS I have all items in same height. One problem left is to have the width of the cell to adapt to the width of the image it contains.
.image-cell { height: 200px !important; width: auto !important; }
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Hi,
On the above page, I have a Carousel in Flickity style set up with Nectar Shortcodes. I need all my slide items to have same height, and have added "carousel-cell" class to all slider cells. I have the following CSS code in the page setting:
.carousel-cell {
display: flex;
align-items: stretch;
min-height: 100%;
}
However, it doesn't seem to do the trick. I'd appreciate any help. Thanks!
Hi There,
Thanks for writing to us.
I see they all have the same height, did you mean the width?
Thanks.
Hi,
I made a few changes and with the following CSS I have all items in same height. One problem left is to have the width of the cell to adapt to the width of the image it contains.
.image-cell {
height: 200px !important;
width: auto !important;
}
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
img.image-cell { width: 100% !important; object-fit: cover; }Thanks
ThemeNectar Support Team
Done. Thanks a lot.