Stuck in 7/9

<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!

I got the problem too!!!

it didn’t work for me TAT

its also not working for me…im stuck

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

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

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.