How can I change the 'Sale' element color without affecting the background?

How can I change the 'Sale' element color without affecting the background?

brightnight1012
Excursionist
29 1 3

I'm dealing with a frustrating issue on my website. I want the "Sale" element next to the price on the Product sections to be green with white text, but my attempts to tweak the CSS inadvertently mess with the background color on mobile overflow making it green. I need a solution to keep the background white while maintaining the green styling for the "Sale" element. Any ideas?

LINK: vanishpen.co

Replies 4 (4)

theycallmemakka
Shopify Partner
1785 435 462

Hi @brightnight1012 ,

 

 

It seems like the requirement has already been fulfilled, as the sale badge is already green with white text. If you are looking for any other assistance, please let me know. Alternatively, you can close this forum request by marking an answer as accepted.

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

brightnight1012
Excursionist
29 1 3

No, the overflow background on mobile is consistently displaying in green, aligning with the color assigned to the 'Sale' element (designated as '.color-background-2'). Despite my attempts to customize this element, it appears to be directly influencing the overall background color. When I refresh the website on a smartphone by overscrolling at the top, the overflow color is green. I urgently need a solution to ensure that the overflow background remains white while retaining the designated green color for the 'Sale' element.

theycallmemakka
Shopify Partner
1785 435 462

Hi @brightnight1012 ,

 

Please add below code and see if his fixes your issue.

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

 

<style>
body {
    background-color: transparent!important;
}
</style>

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

brightnight1012
Excursionist
29 1 3

That didn't help unfortunately, the overflow is still green.

EDIT: I fixed it, just did an inline directly on the tag. Another day another bad CSS habit lol, but at least it works.