SVG doesn't change when screen made bigger or smaller

Question

I cant find the error/s:
.graphic{
  margin: 1em auto;
  width: 30%;
  display:block;
  }
.star-point,
.outer-circle{
  opacity: 0;
}
inner-circle{
stroke-opacity:0;
}
star{
  stroke-width: 0;
}
@media only screen and (min-width:30em){
  .inner-circle{
    stroke-opacity:1;
  }
}
@media only screen and (min-width:40em){
  .inner-circle{
    stroke-opacity:1;
  }
  .star{
  stroke-width:4;
  }
}
@media only screen and (min-width:60em){
  .star-point{
    stroke-opacity:1;
  }
}

T. Gontarek · Accepted Answer

Azzie, 
Did you figure it out? 
If not:
    1) Are the classes applied correctly to the elements? 
   2) If they are, are they spelled correctly? (I have done this several times!)
  3) Check your syntax:     It seems that you forgot to add the "." in front of the class. 
                .inner-circle 
                .star  
Hope this helped... a bit late.

Welcome to the Treehouse Community

Looking to learn something new?

Muaaz Matwadia

Muaaz Matwadia

SVG doesn't change when screen made bigger or smaller

1 Answer

T. Gontarek

T. Gontarek