product image height alignment carousels and Recently viewed products

11 0 2

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?


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;

Replies 2 (2)

Shopify Partner
20 4 4

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


    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

A creative code agency

11 0 2

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


any suggestions?