Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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.