How can I line up product prices horizontally within a collection page?(debut theme)

[Juan786]

I would like to have all the product prices lined up horizontally on products on a collection page. Currently, some product titles are longer than others (which I cannot change), so this alters the position of the product prices.

[dmwwebartisan]

@Juan786,

Please provide a screenshot so I can understand.

Thanks!

[Juan786]

[dmwwebartisan]

@Juan786 

Please add the following code in theme.scss.liquid file. Let me know if this works.

@media only screen and (min-width: 749px) {
.template-collection .product-card__title, .grid-view-item__title { { height: 125px; }
}

[Juan786]

Doesent work.

[dmwwebartisan]

@Juan786 

Sorry that was my bad.

Here is correct one

@media only screen and (min-width: 749px) {
.template-collection .product-card__title, .grid-view-item__title { {height: 125px; }
}

[Juan786]

Thats the same one as before, doesent do nothing.

[dmwwebartisan · Accepted solution]

@Juan786 

@media only screen and (min-width: 749px) {
.template-collection .product-card__title, .grid-view-item__title { height: 125px; }
}

Check this now.

[Juan786]

Can i do the same on mobile version as well? Right now it is like this:

[dmwwebartisan]

@Juan786 

Let me find the solution because if we do for mobile then it won't look good. I think will have to do something with name or display partially with ...

and on the product page, it will display the full name. so the title will display in 2 lines so all prices are lined up. This will work for desktop and mobile as well.

Let me know your opinion. I don't have solution right now but I will get back to you with the solution.

Thanks!

[hco]

Hi, may I know exactly where should we insert this code in the in CSS file for Debut theme? I would also like to align all the prices horizontally regardless if the product title is long or short.

Thank you!