How Do I Change The "Sale" Tag Color In Sense Theme?

[Simon159]

How can I change the color of the Sale icon on the Sense theme. It is currently white but I want it to be something else. Thank you!

[saurav9005]

Please provide store urls

[Simon159]

https://charmente.com/products/theultimatecosmeticbag

I've tried several solutions already but they only seem to work for the desktop version of my website.

[saurav9005]

Hi Simon, Because you only writing the style for desktop screen. 
Use this code- you can add this code in any style file.

.product .price .badge {
    background-color: #000;
    color: #fff;
}

 or add this style on section-main-product.css file in assets line number 372

[Simon159]

What do you mean I am only writing the style for desktop screen? I used the code that you gave me and its still only working on desktop. This is what mobile still looks like.

[saurav9005]

Hi Simon, 

Can you paste the code at the bottom of section-main-product.css after

.product .price .badge {
    background-color: #000;
    color: #fff;
}

[Simon159]

Yeah its still not working.

[saurav9005 · Accepted solution]

It should be outside of media screen 

incorrect

  @media screen and (min-width: 990px) {
.product--large:not(.product--no-media) .product__info-wrapper, .product--large:not(.product--no-media) .product__media-wrapper {
max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
 
  .product .price .badge {
    background-color: #000;
    color: #fff;
}
}

Correct

  @media screen and (min-width: 990px) {
.product--large:not(.product--no-media) .product__info-wrapper, .product--large:not(.product--no-media) .product__media-wrapper {
max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
 
 
}

 .product .price .badge {
    background-color: #000 !important;
    color: #fff !important;
}