Media Query Within CSS Rule

HTML-CSS
1

I am wondering why I can’t get the following media query within a CSS rule to work. I saw this method being used in the “Build a project landing page” project example on codepen. (Which I can’t link to since this is my first post.)

#page-wrapper{
width: 90%;
margin-left: auto;
margin-right: auto;
@media (max-width: 480px) {background-color: lightgray;}
}

Normally I would put all of my media query rules at the bottom of the CSS file in the same media query, but I thought this way of doing it would be better in certain cases.

Can anyone see what I am doing wrong here?

Thank you.

2

Because it’s not CSS, it’s SCSS (you can select it by clicking gear icon in codepen).

3

syntax for media:

@media(min or max px dimensions){
 element{
atribute: value;
}
}

keep in mind that you can style multiple elements within that query and each element can have multiple attributes
Happy coding