---
id: 5a9d72ad424fe3d0e10cad16
title: Use a media query to change a variable
challengeType: 0
videoUrl: 'https://scrimba.com/c/cWmL8UP'
---
## Description
CSS Variables can simplify the way you use media queries.
For instance, when your screen is smaller or larger than your media query break point, you can change the value of a variable, and it will apply its style wherever it is used.
## Instructions
In the :root
selector of the media query
, change it so --penguin-size
is redefined and given a value of 200px
. Also, redefine --penguin-skin
and give it a value of black
. Then resize the preview to see this change in action.
## Tests
```yml
tests:
- text: :root
should reassign the --penguin-size
variable to 200px
.
testString: assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), ':root
should reassign the --penguin-size
variable to 200px
.');
- text: :root
should reassign the --penguin-skin
variable to black
.
testString: assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), ':root
should reassign the --penguin-skin
variable to black
.');
```
## Challenge Seed
## Solution
```js
var code = "@media (max-width: 350px) {:root {--penguin-size: 200px; --penguin-skin: black;}}"
```