Changing placement of sale badge next to product price (compare-at-price)

[ecorushmotors]

So I'm having an issue with the placement of the "Sale" badge next to the product price. 

At the moment it looks like this:

It's way too close to the product price and is not aligned with the product price, instead I would like it to look like this:

 (i used photoshop to showcase how I want it)

I would really appreciate any kind of help on this, thank you! 🙂

[Made4uo-Ribe]

Hi @ecorushmotors 

Would you mind sharing your store URL? Thanks!

[ecorushmotors]

Aurephine.com

[Made4uo-Ribe]

Thanks for the info, check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.price>* {
    display: inline-block;
    vertical-align: middle;
}
.product .price .badge, .product .price__container {
    margin-bottom: 0;
    margin-right: 10px;
}

And save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ecorushmotors]

You absolute legend, thank you so much. I copy pasted it into the base.css file under the assets tab, now it further away from the product price but for some reason it's still pretty far up. Any ideas?

[Made4uo-Ribe · Accepted solution]

Please, repaste for the code below. 

.price>* {
    display: inline-block;
    vertical-align: middle !important;
}
.product .price .badge, .product .price__container {
    margin-bottom: 0 !important;
    margin-right: 10px;
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ecorushmotors]

Amazing, much love to you man thanks. I sent you a little coffee tip on paypal 🙂

[Made4uo-Ribe]

Thank you, and you're welcome!