How to center product pricing debut "you may like" section

Solved
Antibiotics
Tourist
8 0 0

Hi there,

I previously found the answer to this on other threads. However, when adding new products to the store, the product prices are not centered for the new products in the "you may like" section, while the old products are.

The website 

The code I currently use for centering titles and prices:

 

/*== 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%;    
  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;
}

/*== Removes Underline Upon Hover ==*/
.product-card:hover .product-card__title, 
.product-card:focus-within .product-card__title {
  border-bottom: none !important;
}


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

.price dd {
    margin: 1;
}

 

Any help would be appreciated. Thanks in advance

0 Likes
Denishamakwana
Explorer
89 13 13

This is an accepted solution.

please add below code in bottom of assets/theme.css file

.product-recommendations__inner dl.price  {

              display: flex !important;

              align-items: center;

}

.template-product dl.price {
             align-items: center;
Antibiotics
Tourist
8 0 0

Thank you, that worked!

I just removed this bit as I didn't want the price on the product page to be centered:

.template-product dl.price {
             align-items: center;
0 Likes