Basic CSS: Use a Media query to change a variable

HTML-CSS
1

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 {
2

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

3

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

}`

5

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

penguin

6

https://learn.freecodecamp.org/responsive-web-design/basic-css/use-a-media-query-to-change-a-variable

7

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: https://www.youtube.com/watch?v=3mhDp99Wnmo

1 Like