Step 7: Did you nest and apply the properties to .icon?


#1



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


In step 7, the error message I am getting is listed as: Did you nest and apply the properties to .icon? I don't see anything wrong with my markup. This happened in step 6 as well, but when I said "Get Code" after many failed attempts, it let me proceed. Now in step 7, when I click "Get Code" it gives me a "Something went wrong" error in the top right of the screen. It also gives me this error when I try to restart the course.


@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: $transluscent-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

Check to see if you are really missing the semicolon from the end of that line.


#3

I was missing it, but still got the same error when I ran it again.


#4

You need to only have one variable there,because when you run those variables clash and it cant correspond which one to run.Try removing the background one and see what happens.
Food for thought the course is new and a bit buggy.


#5

That was it! Thank you.


#6

I m having the same problem and i remove one variable 'background' as u said earlier but I m having same errror.reply as soon as possible.


#7

I am having the same issue. My complete code is

@import url(https://fonts.googleapis.com/css?family=Pacifico);
//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");
  .slogan {
    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;
	}
}

I am also getting an error when offered to "Get Code". "Something went wrong."


#8

I have the same problem and i cant get aresut with trying


#9

Hello. I get the same error. My code is:
@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;
}
}
Please help


#10

I am having the same problem. Can't get through it .
There is no problem in code still getting the same error. same code runs good in previous section while RUN this code here in this section it gives error "Did you nest and apply the properties to .icon".


#11

Hmmm. Same problem. :frowning:


#12

I have the same ■■■■ problem ,the same f.. error


#13

Weirdly, removing everything nested in icon and then adding the width and height references worked for me...


#14

Thanks! This is what got me through!


#15

The same problem :slight_smile: My code is correct but not working .After "get code" from help is the same problem.


#16

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