Tell us what’s happening:
Your code so far
<style>
:root {
--red-color: red;
}
.red-box {
background: var(--red-color);
height: 200px;
width:200px;
}
.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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36.
Link to the challenge: https://learn.freecodecamp.org/responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks/
sorinr
December 10, 2018, 9:48am
2
" Let’s improve our browser compatibility by adding another background declaration right before the existing declaration and set its value to red."
This is the challenge request. So on the empty line before background: var(--red-color); you need to add another background declaration.
1 Like
can you give me the code please
can you give me the code please
sorinr
December 10, 2018, 10:03am
5
All the code you need its already in the request. Just read it carefully.
ameen
December 11, 2018, 7:30pm
6
just before background: var(–red-color) declare a NEW BACKGROUND EASY PESY
:root {
--red-color: red;
}
.red-box {
background: red; /*This line of code is the solution*/
background: var(--red-color);
height: 200px;
width: 200px;
}
basically the browser which does not understand second one will take first and which understands it would take second as the document flow from top to bottom and last one overrides rest if it is going to change the same data.