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

SVG doesn't change when screen made bigger or smaller

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

1 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.