How to fix "Expected RBRACE"-error at media query? - html

Question

I'm trying to make our web page device responsive with #media. However, I get the errors "Expected RBRACE at line 44, col 3." and "Unexpected token '}' at line 48 col 1.", even though the code looks fine to me. Does anyone have a solution to this?
I've tried to fix the code according to the errors, but that just messes up the #media-portion of the code totally. I've also ran the code through code examiners and the errors remain.
.content {
font-family: 'Lora', sans-serif;
font-size: 48px;
#media (min-width: 480px) {
width: 70%;
margin: 0 auto;
}
}
My goal is to put the code above in css and then use
<div class="content">text goes here</div>
to make our texts look better. However, because of the errors in the css, the div class-line does not have any effect.

Answer 1

You cannot nest a #media query inside vanilla css like this.
You should re-write your css to look like this:
/* outside the media query */
.content {
font-family: 'Lora', sans-serif;
font-size: 48px;
}
#media only screen and (min-width: 480px) {
.content{
width: 70%;
margin: 0 auto;
}
}
Only replace rules where necessary. This will reduce the amount of code you have to write. Also, have a look at https://sass-lang.com/, it will make writing css much easier!
As a general rule of thumb, I tend to place all my #media rules at either the bottom of the stylesheet or in another stylesheet. The idea is that you specify the generic rules at the top of the page (like font-size, font-family, width, etc) then only when you need to, specify what should change and at what viewpoint (like the code I have provided).
Let me know if this is unclear for you!