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

Store Design
1

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

2

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;

}

1 Like
3

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;

}

The first bit did work though; thank you very much :slightly_smiling_face: