Improve Compatibility with Browser Fallbacks -

Improve Compatibility with Browser Fallbacks -
0

#1

Tell us what’s happening:

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

How to do this???

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 6.1; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks


#2

Add div{
background: red;
Hope this helps.


#3

Hey Macy , thanks for reply… but still i dint solve that error

can you please explain me in brief or by coding…??
thanks…


#4

Hi there juhijain123, i had the same problem. Carefully read the instructions before you try it:

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

When you put it like this: “background: var(–red-color, red);” you are not reading the instructions. It says before the existing background declaration. So the answer will be:

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

Try again!


#5

Hi again, juhijain123. alexandergranasen already explained it. :grinning:


#6

Thank you for your reply. I Googled this and got that it was supposed to be

background-color: red;


#7

Good, but do you understand why?


#8

You are most welcome zister!
“background-color: red” does not work for me as a solution, “background: red” is what works in the exercise.


#9

am also having the same issue please how do you solve it ?


#10

Read above my friend :).


#11

Thanks Alex and the community. Its great to learn with so much support.:heart_eyes: