Align product prices on collection page when titles have different lengths

[runwayfashion]

Hi Shopify community,

I’m having an issue on my collection pages where some product titles take 2 lines and others take 3 lines. Because of this, the product prices are not aligned — products with longer titles have their prices pushed lower.

I’ve tried using CSS like min-height or line-clamp on the title, for example:

.product-card__title {
min-height: 3.6em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

…but it hasn’t solved the problem, prices are still misaligned.

I’m using the Aterlier theme.

Does anyone know the best way to make all product prices have the same vertical position regardless of the number of title lines? I’m happy to use CSS or adjust the theme liquid.

[tim_tairli]

I believe you should be able to do this by changing settings on the product card group block, but just in case here is the CSS code to try:

.product-card .group-block-content {
  justify-content: space-between;
}

Before/After:

[runwayfashion]

Thank you this worked perfectly!