Custom CSS for centering a custom Sale Badge

[lucyh]

Hey friends! 

I need a little of help to finish customizing a sale badge! How the heck do I get these to line up centered? 

(as a side note, I would also love a way to have it above the price, centered) 

APPRECIATE IT! 

[Betterave-Nina]

Hi @lucyh. May I see the page URL with the sale badge? Thanks!

[lucyh]

https://97451e.myshopify.com/products/euforia-perimenopause-duo?_pos=1&_psq=perim&_ss=e&_v=1.0

[Betterave-Nina]

It looks like you've already changed the badge and this one doesn't need centering.

If you still want to display the badge above the price, you can do the following:

1: Go to Online Store -> Theme -> Edit code
2: Search file base.css
3: Add the following code to the bottom of the file -> Save

.price.price--large.price--on-sale.price--show-badge {
    display: flex;
    flex-flow: column-reverse;
}

.price.price--large.price--on-sale.price--show-badge > * {
  align-self: flex-start;
  width: auto;
}

If done correctly, the result should be like this:

I hope this helps!

[lucyh]

I figured it out, thank you! 

[BiDeal-Discount]

Hi @lucyh 

let try to add this Custom CSS to the bottom of your file base.css:

.product__info-container .price--large {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
.product__info-container .product__text,
.product__info-container .product__title,
.product__info-container .product__tax,
.product__info-container .product-form__quantity {
  text-align: center;
}
.product__info-container .product-form__quantity {
  max-width: unset;
}
.product__info-container .product-form__input price-per-item,
.product__info-container  .price-per-item__container {
  justify-content: center;
}
.product__info-container .product-form__buttons {
  margin-inline: auto;
}

The result:

[Bundler-Manuel]

Hey there! @lucyh  If you are looking for something short and pretty straightforward to have a look at, I highly recommend this video https://m.youtube.com/watch?v=BhcgyTMe6iU