Please guy i need a hand here

Tell us what’s happening:

Your code so far


<style>
:root {
  --red-color: red;
}
.red-box {
  background: 
  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/87.0.4280.141 Safari/537.36.

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

You have an empty property:

  background: 
  background: var(--red-color);

i tried putting red there but it didnt work so please work can i do just ignore the property and see it like ther is nun please work can i do

Can you show your code? Maybe there is a little bug hidden :slight_smile:

It works for me, so if you’re sure everything is fine maybe try resetting the challenge.

all the codes are up you can check it out

The code that you sent is wrong. You have an empty background property there. It needs a value.

Your .red-box rule should include a fallback with the background set to red immediately before the existing background declaration.

Here:

  background: your-value;
  background: var(--red-color);

i just posted a new one go see thats the way the code came

Tell us what’s happening:

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/87.0.4280.141 Safari/537.36.

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

You can add a fallback like this

.red-box {
    background:red;
    background: var(--red-color);
    height: 200px;
    width:200px;
  }

Also do read this article for better understanding

thanks bro it is ok now was my fault i didnt run my code (:smile: