Sass(y) Types Help


#1



Hello everyone. I'm very confused on this one. I don't see how I'm nesting incorrectly. Any help would be appreciated. Thank you.

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


I'm confused regarding this error message.

"Did you nest and apply the properties to .icon?"


@import url(https://fonts.googleapis.com/css?family=Pacifico);
$translucent-white: rgba(255,255,255,0.3);
$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 {
    $icon-square-length: 300px;
  	display: inline-block;
    width: $icon-square-length;
    height: $icon-square-length;
  	margin: 2%;
  	border: 4px solid black;
  	font-size: 32px;
	}


#2

I'm getting the same error message for my code too! I can't see how I haven't done that.

@import url(https://fonts.googleapis.com/css?family=Pacifico);
//Add variables here:
$translucent-white: rgba(255,255,255,0.3);
$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;
	}
}

The only thing I would suggest is that you've got

$icon-square-length: 300px;

twice: once in the variables at the beginning and once in your .icon selector. I don't know if you need the second one (the one in the .icon selector), but I doubt that's what's causing the error message.


#3

@lornafrankel i think your code is True, reload the page and test again. your code with instructions is true


#4

@firstboy000 I have tried reloading the page, and even restarting my computer and it still didn't work. I submitted a bug report as the 'Get Code' and 'Reset Exercise' functions are also not working.

@rubymaster70094 Have you had any luck with yours?


#5

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