Basic CSS: Use a Media query to change a variable

I’ve gone through the previous lesson multiple times and it’s worked each time but when I enter my variables for this lesson they never seem to work. Am I missing something.

:root { --penguin-size: 300px; --penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange; } @media (max-width: 350px) { :root { /* add code below */ --penguin-size:200px; --penguin-skin: black; /* add code above */ } } .penguin {

if you add a link to the challenge we may be able to help…

All you have to do is put the --penguin-size value and the peguin-skin value in the
`@media (max-width: 350px) {
:root {

  /* add code below */
Here is where your the code should be placed with their respective values!
  /* add code above */


I’m having the same difficulty and it is not working. This is what my code looks like. Please can you advise me.


Hi Rubix! I had the same problem as you. For me the problem was that the line @media (max-width: 350px) was 340px so i changed it to 350px and it worked!

Check out this video:

1 Like