DEBUT Theme center and align prices in product-recommendations__inner

[marcojh]

Hi guys,

I'm having issues finding the correct code. Maybe you can help me?

I want my product recommendations to look exactly like the products in my shop

shop: https://hannah-paula.com/collections/shop

product recommendations: https://hannah-paula.com/collections/weine/products/hannah-paula-s-riesling-wein-trocken-2019

Somehow the prices for the product recommendations won't center and the price__badge--sale is too long.

At the same time I want to horizontally align all prices - is this possible?

Thanks for your help!

The code I'm currently using:

dl.price {
    align-items: center;
}

.h4.grid-view-item__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;
}

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


.price__pricing-group {
    display: block!important;
    text-align: center;
}

.price__regular, .price__sale {margin-right: 0;}
.price__compare dd { margin-right: 0;}
.price--on-sale .price__badge--sale {justify-content: center;}

[dmwwebartisan]

@marcojh 

Please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid->paste below code at the bottom of the file.

.product-recommendations__inner .price--on-sale .price__sale {
    display: inline-flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto !important;
}

Thanks!

[marcojh]

@dmwwebartisan thank you, that helps already and sale prices are now centered!

Do you know as well how to fix the price__badge--sale (it should be the same width as prices and not the entire row) and how to horizontally align all four prices?

Best,

Marco

[dmwwebartisan]

@marcojh 

Please share screenshot.

[marcojh]

@dmwwebartisan 

like in the above: 

Here the sales badge is correct for the product recommendation it does not apply yet.

+I've added a line where I'd like to have all prices aligned

 

[dmwwebartisan]

@marcojh 

Please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid->paste below code at the bottom of the file.

.product-recommendations__inner .h4.grid-view-item__title {min-height: 45px;}

Thanks!

[marcojh]

@dmwwebartisan perfect, thank you so much!

I've figured out the sale badge as well, so everything works now as it's supposed to. 🙂

Thanks again!