How To Change Sale Badge Color To Red In Refresh Theme Mobile

Shopify Discussion
,
1

I need help changing the color of the discount badge on mobile, I entered the following code to change it on desktop:

.card__badge .badge{
    font-size: 13px;
    background-color: red;
    font-weight: bold;
  }

  .price .price__badge-sale {
    font-size: 13px;
    background-color: red;
    font-weight: bold;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

But in mobile is not working, can anyone help me?

MobileCaptura.JPG
MobileCaptura.JPG397×867 37.8 KB

Capturar.JPG
Capturar.JPG1538×876 66.6 KB

2

Hey @KhallP ,

Please replace the previous CSS code with the code provided below and verify:

/* For Desktop */
.card__badge .badge,
.price .price__badge-sale {
	font-size: 13px;
	background-color: red;
	font-weight: bold;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* For Mobile */
@media only screen and (max-width: 767px) {
	.card__badge .badge,
	.price .price__badge-sale {
		background-color: red;
	}
}

Thank You.

3

Still not working in mobile…

4

Hey @KhallP ,

It is working correctly at my end.

DevDynamo_0-1708450288746.png
DevDynamo_0-1708450288746.png288×522 61.2 KB

Could you please again check where you placed the code? Or, if it still doesn’t work, you can replace the previous codes with the code provided below:

/* For Desktop */
.card__badge .badge,
.price .price__badge-sale {
	font-size: 13px;
	background-color: red !important;
	font-weight: bold;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* For Mobile */
@media only screen and (max-width: 767px) {
	.card__badge .badge,
	.price .price__badge-sale {
		background-color: red !important;
	}
}

Thank You.

5

That´s so strange

Capturar.JPG
Capturar.JPG447×892 39.3 KB

.card__badge .badge,
.price .price__badge-sale {
	font-size: 13px;
	background-color: red !important;
	font-weight: bold;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* For Mobile */
@media only screen and (max-width: 767px) {
	.card__badge .badge,
	.price .price__badge-sale {
		background-color: red !important;
	}
}
}
6

Hey @KhallP ,

Can you please clarify how and where you placed the provided code?

Thank You.

7

I insert the code in the bottom of “base.css” file

8

Hey @KhallP ,

Could you please try adding this to Global Custom CSS?

Steps:

  1. In your Shopify admin, go to Online Store > Themes.
  2. Click Customize.
  3. Click Theme settings.
  4. Click Custom CSS.
  5. Add your code.
  6. Click Save and Verify.

Thank You.

9

Still Not Working Bro, That´s so Strange

10

OK, now it worked, I didn’t understand that you said to put MY code

11

Hey @KhallP , there seems to be a conflict in CSS.

12

Glad it worked for you @KhallP ! :blush: