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

Solved
Annavittoria
Excursionist
20 0 9

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

Cattura1.JPG

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

Cattura2.JPG

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

www.pianodgirls.com

 

KetanKumar
Shopify Partner
14494 1670 5204

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Annavittoria
Excursionist
20 0 9

Thanks @KetanKumar for your support, as always.

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

Cattura3.JPG

Any further advice?

___________________________________

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

Cattura4.JPG

Please help me on this matter too!

Thanks

KetanKumar
Shopify Partner
14494 1670 5204

This is an accepted solution.

@Annavittoria 

thanks for update

.price__regular dd {
    margin-right: 0;
}
.product-card {
text-align: center;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Annavittoria
Excursionist
20 0 9

@KetanKumar 

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

Cattura5.JPG

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

Thanks

 

 

KetanKumar
Shopify Partner
14494 1670 5204

@Annavittoria 

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

.price--on-sale .price__badge--sale {justify-content: center;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Annavittoria
Excursionist
20 0 9

@KetanKumarPerfect!!!

Thank you so much!!!

Annavittoria
Excursionist
20 0 9

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

0 Likes
KetanKumar
Shopify Partner
14494 1670 5204

@Annavittoria 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing