Dont know why fallback will not pass

Dont know why fallback will not pass
0

#1

Tell us what’s happening:
I dont know why this code will not pass,

Your code so far


<style>
  :root {
    --red-color: red;
  }
  .red-box {
    background-color: #ff0000;
    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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

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


#2

Read the instructions carefully. What property were you supposed to provide a fallback for?


#3

It looks like a variable is being used to set the background color of the .red-box class. Let’s improve our browser compatibility by adding another background declaration right before the existing declaration and set its value to red.


#4

I have looked up several articles and the codes all look like mine.


#5

I’ll ask again. What is the property that you are supposed to provide a value for? What is the actual name of the property? What is the name of the property that you added?


#6

This is the only challenge in the Responsive Web Design Certification that i have not passed including the 5 projects. So it will not give me a certificate. What am i missing?


#7

What’s is the color of the variable?


#8

The color of the variable is red


#9

i have tried using red instead of #ff0000 still nothing


#10

What’s the property with a variable for a value? Is it background-color?


#11

i tried red-box color: red;


#12

i tried using red-color also


#13

The Variable is --red-color


#14

i have tried using background-color: red; in the root element also


#15

red-box is the property with a variable


#16

Lose the -color part in your PROPERTY :slight_smile:

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

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

Meaning you need another background property set to red.