4. Nesting Selectors

#1


https://www.codecademy.com/en/courses/learn-sass/lessons/hello-sass/exercises/nesting-sassand-parent-selector/exercises/parent-selector

My code can't pass lesson 4. Nesting Selectors. What's wrong?
It has an error code of "Did you nest and apply the properties to .slogan?"


@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");
  .slogan {
  position: absolute;
  border: 4px solid black;
  top: 200px;
  left: 25%;
  width: 50%;
  height: 200px;
  text-align: center;
  }
}

.container {
  text-align: center;
  font-family: 'Pacifico', cursive;
}

#4

The .slogan selector rule does not look right. Should it be outside of the .banner rule set? Where is the span selector rule?

#5

Instruction 1. asks to nest .slogan inside .banner class selector, that's where i got stuck.

span selector is asked in instruction 2.

#6

My mistake. It does look correct.

#7

Thanks for looking...but it can't pass instruction 1.

#8

Try to refresh the page and see what happens.

#9

i refreshed, changed browsers, logged in and out more than enough times...but still can't pass :frowning:

#10

In the lower right Get Help is a pop-up with a redo exercise option. What happens when you opt for that route?

#11

I am facing the same issue!!

#12

/* latin */
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v7/Q_Z9mv4hySLTMoMjnk_rCXYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

this is supposed to be on line one I have no idea why so much code its missing

#13

Having the same problem and I'm pretty sure that this is correct:

.banner {
font-family: 'Pacifico', cursive;
height: 400px;
background-image: url("lemonade.jpg");
.slogan {

position: absolute;
border: 4px black;
top: 200px;
left: 25%;
width: 50%;
height: 200px;
text-align: center;

}
}

#14

Where did you find this code?

#15

Try to change browser to Edge or Opera or Mozilla

For example : when I am stuck with a lesson in Chrome, I change it to Edge (or Opera), write down just the same code and system let me forward. Then I re-change my browser to Chrome.

#16

Use Opera- everything magically started to work

#17

Change your browser to Opera. everything magically started to work

#18

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