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

Solved
Highlighted
Explorer
70 0 9

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.

0 Likes
Highlighted
Shopify Partner
3207 705 851

@Juan786,

Please provide a screenshot so I can understand.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
Highlighted
Explorer
70 0 9

line up 3.PNG

0 Likes
Highlighted
Shopify Partner
3207 705 851

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

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
Explorer
70 0 9

Doesent work.

0 Likes
Highlighted
Shopify Partner
3207 705 851

@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; }
}
If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
Highlighted
Explorer
70 0 9

Thats the same one as before, doesent do nothing.

0 Likes
Highlighted
Shopify Partner
3207 705 851

This is an accepted solution.

@Juan786 

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

 

Check this now.

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
Highlighted
Explorer
70 0 9

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

 

mobile.PNG

0 Likes
Highlighted
Shopify Partner
3207 705 851

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

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes