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

Store Design
1

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.

2

@Juan786 ,

Please provide a screenshot so I can understand.

Thanks!

1 Like
3

line up 3.PNG
line up 3.PNG1437×700 89.1 KB

4

@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; }
}
1 Like
5

Doesent work.

6

@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; }
}
1 Like
7

Thats the same one as before, doesent do nothing.

8

@Juan786

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

Check this now.

1 Like
9

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

mobile.PNG
mobile.PNG394×687 41.7 KB

10

@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!

11

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!