Why @media query did not work here

Question

https://code.sololearn.com/W1MYyWw5SA8U/?ref=app

Answer 1

1. Go to https://code.sololearn.com/W1MYyWw5SA8U/?ref=app#css
2. Scroll to the bottom.
3. Look at your media query code closely. Look at the indentation and areas.
Sololearn's editor shows them as dots for me and you should see them too. They look like this:
@media only screen and (max-width: 400px).{
...body.{
......background-color:.lightblue;
...}
}
Just to be very clear, you don't have period characters in your code. I used periods above so it would look similar in this other font.

Those dots indicate that you have invalid whitespace characters. They show as dots mainly because of Sololearn's specific font but those characters will not have the ASCII code corresponding with a regular space or tab.

Answer 2

Look at it in Sololearn's code editor and you'll see why. You have invalid whitespace characters in your CSS around your media query. Sololearn's code editor draws these invalid characters as dots.

I replaced the invalid characters with regular spaces and the media query works now:
@media only screen and (max-width: 400px) {
body {
background-color: lightblue;
}
}

Answer 3

Didn't understand

Answer 4

Got it, thanks for explaining.