Stuck in 7/9


#1



https://www.codecademy.com/courses/learn-sass/lessons/hello-sass/exercises/types


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;
  }
}


#2

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.


#3

Has anyone got an ETA on this problem? It's incredibly frustrating and I have tried all the solutions.


#4

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.


#5

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!


#6

I got the problem too!!!!!


#7

it didn't work for me TAT


#8

its also not working for me..im stuck


#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;
}
}


#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;
  }
}

#11

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.


#12

Same issue here - code is correct and getting the error and the "Get Code" function is not working...


#13

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