CSS Media query not working for some reason

Question

I need to make a website responsive built in 2012. I'm editing the style.css file (Wordpress website) but the media query doesn't work for some reason. Already checked the css file online, and the media query is in it.

The website I'm talking about is www.carter-realestate.be There is nothing wrong with the media query, I've done this a hundred times before. The style.css file with the media query is online, so you can check it out.

Anybody knows an explanation for this?

Answer 1

You need to add a space between "and" and "("

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

Answer 2

Trying changing it to:

@media only screen and(max-width: 900px){
    body{
        background-color: red !important;
        color: blue;
    }

    h1{
        font-size: 15em;
    }
}

Answer 3

There's some script on your page that's re-writing the @media rules.

Looking at your source code in style.csss I see:

@media all and(max-width: 900px){
body{
    background-color: red !important;
    color: blue;
}

h1{
    font-size: 15em;
}
}

But checking it out in Firebug (via Firefox) I see the code changed in the DOM to:

@media not all {
    body {
        background-color: #FF0000 !important;
       color: #0000FF;
    }
    h1 {
        font-size: 15em;
    }
}

Somewhere a script is re-writing the @media rules to "not all".

Try disabling all scripts in the WordPress plugin and refresh the page. If that doesn't work, edit the HTML and comment out any remaining scripts loading. Then add a script or plugin back in one by one until you find which is re-writing the DOM.