Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML SVG Basics SVG and CSS Responsive SVGs

Responsive SVG isn't working

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; } }

1 Answer

Jonathan Gardner
Jonathan Gardner
8,383 Points

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.