Responsive SVG isn't working

Question

I'm pretty sure I copied Nick's code, but my media queries aren't working. Can anyone help?
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-family: 'Nunito', sans-serif;
  color: #384047;
}
.wrapper {
  max-width: 90%;
  margin: 10px auto;
  padding: 10px 20px;
  background: #f4f7f8;
  border-radius: 8px;
}
h1, h2 {
  margin: 30px 0;
  text-align: center;
}
.graphic {
  margin: 1em auto;
  width:30%;
  display:block;
}
.star-point,
.outer-circle {
  opacity:0;
}
inner-circle {
  stroke-opacity: 0;
}
.star {
  stroke-width: 8;
}
@media only screen and (min-width: 30ems) {
  .inner-circle {
    stroke-opacity: 1;
  }
}
@media only screen and (min-width: 40ems) {
  .outer-circle {
    opacity: 1;
  }
  .star {
    stroke-width: 4;
  }
}
@media only screen and (min-width: 64ems) {
  .star-point {
    opacity: 1;
  }
}

Jonathan Gardner · Accepted Answer

You need to change the unit “ems” in your media queries to “em”. There is no “s”. Also on line 17 counting down from the first line of code, two declarations before your first media query, you forgot the “.” class selector before inner-circle. Hope that helps.

Welcome to the Treehouse Community

Looking to learn something new?

Ashley Tee

Ashley Tee

Responsive SVG isn't working

1 Answer

Jonathan Gardner

Jonathan Gardner