Product image height alignment carousels and Recently viewed products

Store Design
,
1

on our products page we have a “recently viewed products” and “you may also like” slider, how do we align the products height and line up the buttons?

https://accessmodels.co.uk/collections/30-plastic-models-kits-figures/products/dragon-1-35-sturmgeschutz-stug-iii-ausf-g-initial-production-6755

I have had this issue on the collection page and solved it with the following in the style.css, what else do i need to add to make this fit other functions?

.product-info__caption .title {
font-size: 12px; /* Example size, adjust as needed */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product-list .thumbnail, .slider-gallery .thumbnail, .list-collections .thumbnail
{
display: flex;
flex-direction: column;
justify-content: space-between;
}

2

You could change the .image__container to display: grid and add overflow: hidden

.image__container{
    display: grid;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

Alternatively you might be able to play around with forcing the aspect ratio of the image using aspect-ratio: 1;

Hope this helps

3

thank you, this seems to work for the carousel, but not the “recently viewed products”

any suggestions?