DEBUT - Prices alignment to center under product images in Collections/Recommendations

[Annavittoria]

Hello,

following some previous discussions, I've been able to center title under the images in collections & recommendations adding this code:

/*== Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==*/
dl.price {
    align-items: center;
}

.h4.grid-view-item__title.product-card__title {    
  text-align: center;    
  width: 100%; 
  font-size: 15px;
  display: inline-block;
  text-decoration: none;
}
.template-product dl.price{align-items: flex-start;}

.product-recommendations__inner dl.price {
    display: block!important;
    text-align: center;
}

but as you can see from the screenshot, prices are slightly moved to the left

So, i tried to add the following code:

.price dd {
    margin: 0 -0.5em 0 0 !important;
}

but the result is that the single prices are correctly displayed, but when there are compared prices, they overlaps

Any help for fixing this problem and have both correctly centered and properly spaced? Thanks in advance

www.pianodgirls.com

[KetanKumar]

@Annavittoria 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.price__regular, .price__sale {margin-right: 0;}
.price__compare dd { margin-right: 0;}

[Annavittoria]

Thanks @KetanKumar for your support, as always.

..unfortunately now is the single price that is not centered when displayed alone

Any further advice?

___________________________________

In addition, forgot to mention that prices are not centered as well into the product recommendation section

Please help me on this matter too!

Thanks

[KetanKumar · Accepted solution]

@Annavittoria 

thanks for update

.price__regular dd {
    margin-right: 0;
}
.product-card {
text-align: center;
}

[Annavittoria]

@KetanKumar 

Amazing job!! Last little thing and it is going to be a perfect solution

ON SALE badge seems too long and the writing inside not centered. Any help? It is also about product recommendation

Thanks

[KetanKumar]

@Annavittoria 

oh, sorry for the missout can you please add this code also

.price--on-sale .price__badge--sale {justify-content: center;}

[Annavittoria]

@KetanKumarPerfect!!!

Thank you so much!!!

[Annavittoria]

Quick summary for easier reference of future users:

Hereunder the whole code I've added into theme.scss.liquid

/*== Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==*/
dl.price {
    align-items: center;
}

.h4.grid-view-item__title.product-card__title {    
  text-align: center;    
  width: 100%; 
  font-size: 15px;
  display: block;
  text-decoration: none;
}

.template-product dl.price{align-items: flex-start;}

.product-recommendations__inner dl.price {
    display: inline-block!important;
    text-align: center; 
}

.price__regular, .price__sale {margin-right: 0;}
.price__compare dd { margin-right: 0;}

.price__regular dd {
    margin-right: 0;
}
.product-card {
text-align: center;
}

.price--on-sale .price__badge--sale {justify-content: center;}

/*== END Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==*/

/*== Removes Underline Upon Hover Under Product Images in Collections & Product Recommendations ==*/
.product-card:hover .product-card__title, 
.product-card:focus-within .product-card__title {
  border-bottom: none !important;
}
/*== END Removes Underline Upon Hover Under Product Images in Collections & Product Recommendations ==*/

 (font size depends on your choice)

Ciao!!

[KetanKumar]

@Annavittoria 

it's my pleasure to help us