'IDE yelling about CSS @media query

screenshot of some of the errors in my code

My CSS code has suddenly been identified as having problems in my IDE. When I tried adding media queries to make my website responsive, it is making things such as colons and curly brackets have errors. I don't understand what I've done wrong.

css


Solution 1:[1]

The brackets are not the problem. You just forgot to add the and keyword to your media query:

@media screen and (max-width: 750px) {
/*  Your code */
}

Solution 2:[2]

Your media query:

@media screen (max-width: 750px) {
  /* ... */
}

Is incorrect. The correct media query is as follows:

@media screen and (max-width: 750px) {
  /* ... */
}

Note the and keyword.

Solution 3:[3]

Remove screen it is not necessary. If you are only wanting to apply primarily to screens then add the word and after screen.

@media (max-width: 750px) {

or

@media screen and (max-width: 750px) {

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Parking Master
Solution 2 Jacob
Solution 3 nahoneyc

Related Questions