Media Query: Changing variable doesn't do anything

HTML-CSS
1

I changed the Media Query variales in .root, but nothing changes, yet it passed. i don’t understand.

Code:

\\

: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 */

\\

2

If you go back to the lesson, with the correct code in place, re-size the window on the right by dragging the divider bar to the left and right on the canvas. Once you hit the 350px width threshold the image should change in size and color.

1 Like
4

I sat there for a good 5 minutes trying to figure out why nothing was happening, I didn’t even think to do that even though it literally hints to that in the explanation. Thank you.

5

I tried it but, for me, the right window only adds the scroll bar at the bottom.

I don’t know what I’m doing wrong…