Hi all im lookiing for a solution please , we are using swatches which are displayed at collection level , however at this level when you get 2 products with differeneces in the colour swatch quantity it throws the height out / styling
is there any way we can make these the same height please the images themseleves are near enough the same dimensions
i have tried a few solutions and had no joy happy to apply across the theme - our theme is a charge theme and the page is https://dtf2u.co.uk/collections/t-shirts thankyou
click on edit code the paste the below code at the end of the file, file name is component-listing-grid.css
li.grid-item.reveal-item squama-item {
height: 100% !important;
}
li.grid-item.reveal-item squama-item .item-link {
height: 100% !important;
}
Hi thanks im afraid it didnt work here is the page example ( see bottom row ) https://dtf2u.co.uk/collections/mockup-emulator and our screenshot code
please add the below code above of previous
.magazine .products {
align-items: stretch !important;
}
1 Like
Perfect thankyou very much 
Hi so we changed the variation of the theme colour and the swatches are limited here is our code below and image result based on before solution and this is the url
https://kitout-fitness.co.uk/collections/kitout-custom-kits?page=3
the product grids ( highlighted in pink is the issue ) do you have any solutions to offer kind regards
@media all and (min-width: 768px) {
squama-item:hover .item-title,
squama-item[data-focused] .item-title {
-webkit-line-clamp: initial;
}
squama-item[data-status=“ready”] .item-actions-wrapper {
display: block;
}
.grid-item .item-link {
border: 1px solid transparent;
}
.magazine .products {
align-items : stretch !important ; }
}
li.grid-item.reveal-item squama-item {
height : 100% !important ; }
li.grid-item.reveal-item squama-item .item-link {
height : 100% !important ; }
