My sale badge is not centred with price (dawn theme)

[sunny96x]

As seen in the screenshot below, the sales badge is aligned to the top, how can i make it aligned to the middle so it sits perfectly in line with the price?

 

website: https://shopstellory.com/products/sticky-inserts

[BSSCommerce-B2B]

@sunny96x ,

Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2: Search for the file theme.liquid

Step 3: Add this code before </body> tag

<style>
.product .price .badge, .product .price__container {
   margin-bottom: 0!important
}
</style>

[BSSCommerce-B2B]

Here is the result for you 

[sunny96x]

Hi, it's a little bit better now but still not perfect - I should have mentioned before that the price is a bigger font size than the SAVE 30% text.

[BSSCommerce-B2B · Accepted solution]

@sunny96x, Change the previous code like this

<style>
.product .price .badge, .product .price__container {
   margin-bottom: 0!important
}
.price.price--large.price--on-sale.price--show-badge {
   display: flex;
   align-items: center
}
</style>

[sunny96x]

Thank you so much brother!

[Gracie_Sandra]

To center the sale badge with the price in the Dawn theme, you’ll need to adjust the CSS. Here’s how:

1. Go to the CSS File:

   • Navigate to Online Store > Themes > Actions > Edit code.
   • Find the file named base.css (usually under the Assets folder).

2. Add Custom CSS:

   • Scroll to the bottom of the base.css file and add the following code:

     css

     Copy code

     .price__badge-wrapper { display: flex; align-items: center; justify-content: center; } .price__sale-badge { margin: 0 auto; }

3. Save and Preview:

   • Click Save and then preview your store to see if the sale badge is now centered.

If it still doesn’t align perfectly, you may need to tweak the margin or padding values to fit your specific design.