Align Prices on products

Toptoys2uHS
Explorer
83 1 9

Hello All,

 

I would like to find out how to align prices on the products collections.

 

I have tried to use "Align-items" on the prices but unfortunately there is no function to make them all centered, preferably towards the lowest point of whichever listing has the longest title.

 

Align Prices.png

 

Here is the website to test on: https://toptoys2u.co.uk/ 

 

I appreciate any help on this issue.

 

Kind Regards

 

 

Replies 3 (3)

aldy_expatify
Shopify Partner
18 0 3

Hi @Toptoys2uHS 
You can try using this code in your css

@media screen and (min-width: 1280px) {
  a.product-item__title.text--strong.link {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 50px;
  }
}
If you like our solution, please like and mark it as a solution.
Don't hesitate to reach us for more Shopify solutions. Thanks 🙂
Website: Expatify Indonesia
Email: guru@expatify.co.id
Whatsapp: Whatsapp
Toptoys2uHS
Explorer
83 1 9

Hello @aldy_expatify 

 

Thank you for your updated code.

 

While it seems to have fixed the issue for some products, there are still others where the price is not aligned properly.

 

Please see the image as reference.

 

Toptoys2uHS_0-1704898721568.png

 

Would you happen to know on a fix for this?

 

Kind Regards

aldy_expatify
Shopify Partner
18 0 3

Hi, @Toptoys2uHS sorry I just read your reply.
You can try to adjust the min-height. You can try to make it bigger like 70px maybe.

If you like our solution, please like and mark it as a solution.
Don't hesitate to reach us for more Shopify solutions. Thanks 🙂
Website: Expatify Indonesia
Email: guru@expatify.co.id
Whatsapp: Whatsapp