Basic CSS: Use a media query to change a variable (What did I learn?)

HTML-CSS
1

I wasn’t sure whether to post this here or in the HTML-CSS category considering this isn’t a specific question about the code, but a more general question about what exactly I learned in this final challenge of Basic CSS.

This challenge introduces a completely new concept to me, media query, and asks me to redefine the :root variables within it. Ok, I can do that, and I think I can understand that the variables within the media query will now take on this new value, right?

But didn’t I just learn that in the previous two lessons about cascading? So this lesson just asked me to practice cascading again, except this time I have no idea what the result is because I don’t see any visible change, and I have no idea what a media query even does.

Am I missing something here?

Thanks

EDIT: I’ll gladly move this to the HTML-CSS category if it belongs there instead.

2

What is the media query? Although media queries are obviously a new concept, they should be fairly self-explanatory, for example:

@media screen and (min-width: 400px) {
  /* Whatever is here will be applied if
    * the window is bigger than 400px */
}

So if you redefine the variables in a media query, then they will change when that query is true.

(I’m moving this to HTML/CSS as well, you’ll get better answers there, this isn’t really a support query)

3

Ok, I suppose you’re right that it is somewhat obvious now that I go back to it, but I think the main problem was that I just completely overlooked this final instruction:

Then resize the preview to see this change in action.

Had I seen and performed that action the first time it would have been completely clear to me.

As it is with coding in general, it seems, small mistakes create for large misunderstandings.

1 Like