Can you help me what this is mean? I don't understand what to do? please help me

[Ahmed_Surchi_001]

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

<style>
:root {
  --red-color: red;
}
.red-box {

  background: var(--red-color);
  height: 200px;
  width:200px;
}
</style>
<div class="red-box"></div>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 Edg/92.0.902.73

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

freeCodeCamp.org

[Tynael]

Solution:

<style>
  :root {
    --red-color: red;
  }

  .red-box {
    background: red; // Add this line here. It acts as a browser fallback
    background: var(--red-color);
    height: 200px;
    wdth:200px;

  }

</style>

<div class="red-box"></div>

[Ahmed_Surchi_001]

not working Sorry

[Jaydog]

@Tynael code works for me when I try it.

@Tynael

background: red;

just above the

@Tynael

background: var(--red-color);

[Ahmed_Surchi_001]

like this?

[Jaydog]

If the code is correct but not working for you check to see if your web browser has any add blockers or dark modes enabled as these will cause problems for the tests.

[Ahmed_Surchi_001]

I turned to light mode too but still not working

[Jaydog]

On the latest image I see you have put the background:red; below the background:var(--red-color);
You need to swap them around so background:red; is above.
If it doesn’t work do you have a different browser you could try it on?

[Ahmed_Surchi_001]

thanks, I tried on another browser and that worked