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?
Topic summary
Issue: The “Sale” badge was too close to and misaligned (higher) relative to the product price. The OP wanted the badge horizontally spaced and vertically aligned with the price, as shown in shared screenshots (images central for before/after context).
Context: Helper requested the store URL (aurephine.com) to assess. The fix targeted theme CSS in Online Store > Themes > Edit code > Assets (base.css/main.css/style.css/theme.css).
First fix: Added CSS to make .price children display inline-block with vertical-align: middle, and set margins for .product .price .badge and .product .price__container (margin-bottom: 0; margin-right: 10px). Result improved spacing, but the badge remained too high.
Final fix: Updated the same rules with !important on vertical-align and margins to override theme styles. This aligned the badge vertically with the price and preserved horizontal spacing.
Outcome: User confirmed the fix worked. No further issues or disagreements. Resolution: Closed/solved with a CSS override using !important to enforce alignment and spacing.
