<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>
<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/courses/learn-sass/lessons/hello-sass/exercises/types
<In what way does your code behave incorrectly? Include ALL error messages.>
The lesson is refusing to accept the correct answer and I cannot proceed to the next lesson.
Looking at this forum this appears to be a recurrent issue that has not been resolved. This needs to be fixed.
```
@import url(https://fonts.googleapis.com/css?family=Pacifico );
//Add variables here:
$translucent-white: rgba(255,255,255,0.3);
$icon-square-lenth: 300px;
h1 {
font-family: Roboto, sans-serif;
text-align: center;
}
.banner {
font-family: āPacificoā, cursive;
height: 400px;
background-image: url(ālemonade.jpgā);
.slogan {
background-color:$translucent-white;
position: absolute;
border: 4px solid black;
top: 200px;
left: 25%;
width: 50%;
height: 200px;
text-align: center;
span {
font-size: 24px;
line-height: 200px;
}
}
border:{
top:4px solid black;
bottom:4px solid black;
}
}
.container {
text-align: center;
font-family: āPacificoā, cursive;
.icon {
display:inline-block;
margin:2%;
border:4px solid black;
font-size:32px;
width: $icon-square-length;
height: $icon-square-length;
}
}
<do not remove the three backticks above>
For those interested, I found a solution.
.container {
text-align: center;
font-family: 'Pacifico', cursive;
.icon {
display:inline-block;
margin:2%;
border:4px solid black;
font-size:32px;
width: $icon-square-length;
height: $icon-square-length;
}
}
The tabs before width and height were causing the issue.
1 Like
Has anyone got an ETA on this problem? Itās incredibly frustrating and I have tried all the solutions.
I tried austinmaysās solution, and it didnāt work for me.
Codecademy, youāve got all sorts of problems with the Sass unit; 4, 5, 6, and 7 of the first lesson donāt validate properly. You should really consider unpublishing this unit until you get it working.
1 Like
Okay, okay. Itās not all sorts of problems, itās just one; the validation breaks if you, as I do, block third-party trackers. The particular culprit is the Segment library. If you allow Segment to, as they say, ācollect all of your data and send it anywhereā, Codecademy will tell you that you did the exercise right.
Come on, Codecademy! Answer validation shouldnāt have anything to do with your marketing schemes. De-couple that nonesense!
it didnāt work for me TAT
its also not working for meā¦im stuck
jastium
February 20, 2017, 8:36pm
9
Making sure this doesnāt get locked. Canāt complete the exercise either. Parts it wants me to do are bolded bellow.
@import url(https://fonts.googleapis.com/css?family=Pacifico );
$translucent-white: rgba(255,255,255,0.3);
$icon-square-length: 300px;
//Add variables here:
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: 25%;
width: 50%;
height: 200px;
background-color: $translucent-white;
span {
position: absolute;
text-align: center;
line-height: 200px;
}
}
}
.container {
text-align: center;
font-family: āPacificoā, cursive;
.icon {
display: inline-block;
margin: 2%;
border: 4px solid black;
font-size: 32px;
width: $icon-square-length;
height: $icon-square-length;
}
}
2 Likes
grallon
February 23, 2017, 5:00am
10
This solution worked for me also.But I donāt know why .Can somebody enlighten me.Following is my code:
@import url(https://fonts.googleapis.com/css?family=Pacifico);
$translucent-white: rgba(255,255,255,0.3);
$icon-square-length: 300px;
//Add variables here:
$icon-square-length:300px;
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: 25%;
width: 50%;
height: 200px;
background-color: $translucent-white;
span {
position: absolute;
text-align: center;
line-height: 200px;
}
}
}
.container {
text-align: center;
font-family: 'Pacifico', cursive;
.icon {
display:inline-block;
margin:2%;
border:4px solid black;
font-size:32px;
width: $icon-square-length;
height: $icon-square-length;
}
}
1 Like
Yes, I am having the same exact problem, except all of the solutions listed are not working. Here are the instructions that it gave me:
And then I wrote this:
$icon-square-length: 300px;
.$translucent-white: rgba(255,255,255,0.3);
@import url(https://fonts.googleapis.com/css?family=Pacifico);
//Add variables here:
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: 25%;
width: 50%;
height: 200px;
background-color: $translucent-white;
span {
position: absolute;
text-align: center;
line-height: 200px;
}
}
}
.container {
text-align: center;
font-family: 'Pacifico', cursive;
}
.icon {
display:inline-block;
margin:2%;
border:4px solid black;
font-size:32px;
width: $icon-square-length;
height: $icon-square-length;
}
}
Maybe Iām doing something wrong, but an error keeps popping up saying that I didnāt nest anything in the .icon class selector when I did. (āDid you nest and apply the properties to .icon?ā)
It also doesnāt help that for some reason, all of a sudden my ability to āGet Codeā when Iām stuck is disabled or something.
Same issue here - code is correct and getting the error and the āGet Codeā function is not workingā¦
2 Likes
system
Closed
March 10, 2017, 4:33pm
13
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.