Search code examples
htmlcssmedia-queries

media query was working fine but suddenly doesn't work anymore

It worked before but all of a sudden it stopped working :(

@media only screen and (max-width: 768px) {
form,
button,
input {
     width: 80vw !important;
    }
}


<meta name="viewport" content="width=device-width, initial-scale=1">

I have html, css and js code included in the link below:

DEMO: CodePen

Solution

  • The problem is an invisible special character inserted into your code.

    It's making the declaration invalid, which calls CSS error-handling into play, and the rule is ignored.

    If you copy and paste the code into Notepad, you'll see it.

    enter image description here

    In computer science we call this a focused, non-repeating phantasm, or class-5 free roaming vapor... real nasty one, too! :-)

    The simple solution is to just delete that media query and re-type it.