Lesson 6 Variables Not Working PLEASE HELP ASAP!

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>
Hello.
I’m stuck on lesson six, where my variable won’t work. It comes up with the error message: Did you add a background-color property of .slogan class in main.scss? This is the link to the exercise I’m stuck on: https://www.codecademy.com/en/courses/learn-sass/lessons/hello-sass/exercises/variables
PLEASE HELP!

This is my code:
$translucent-white: rgba(255,255,255,0.3);
h1 {
font-family: Roboto, sans-serif;
text-align: center;
}

.banner {
font-family: ‘Pacifico’, cursive;
height: 400px;
background-image: url(“lemonade.jpg”);
border : {
top: 4px solid black;
bottom: 4px solid black
}
}
.slogan {
position: absolute;
border: 4px solid black;
top:200px;
left: 35%;
width: 50%;
height: 200px;
text-align: center;
background-color: $translucent-white;
span {
font-size: 24px;
line-height: 200px;
}
}
}

}

.container {
text-align: center;
font-family: ‘Pacifico’, cursive;
.icon {
display: inline-block;
margin: 2%;
border: 4px solid black;
font-size: 32px;
}
}

It may not have anything to do with the problem (which may just require a refresh and Run again) but backward compatibility is important. It’s a good practice to write a CSS 1&2 property just before a CSS3 one, so older browsers set a color.

background-color: white;   /* old CSS */
background-color: rgba(255,255,255,0.3);

or as given in SASS,

background-color: white;
background-color: $translucent-white;

Browsers that do not recognize the rgba() color, will recognize the white, and since it is first in the list, newer browsers will ignore it in favor of the property they do recognize.

Thanks for the help. I will try this.

It is still coming up with the same return message - do you have any other ideas?

I didn’t have a solution to begin with, so how would I come up with one now? My code passed even after I tossed in the backward compatible bit, and it looks pretty much like yours. This is a tough nut to crack.

Thanks for helping…

1 Like