Media query: how to make text change color when wi

Question

I want to make my text change color when the window size gets below 600px:

jsfiddle: http://jsfiddle.net/LgsXT/1/

text:

<div class = "derp">derp derp derp</div>

css:

.derp {
color:red;
}

@media (max-width:600) {
    .derp {
        color:blue;
    }
}

But it's not doing anything. What's wrong?

Answer 1

You need to add a unit to your value in the query otherwise the number has no meaning so it would look like this:

.derp {
    color:red;
}

@media (max-width:600px) {
    .derp {
        color:blue;
    }
}

Answer 2

You need a px or other unit for the @media rule. Also, watch those spaces in your HTML, and I would suggest you work up instead of down in screen-size

<div class="my-box">Derp</div>


.my-box {
    color: red;
}

@media (min-width: 600px) {

    .my-box {
        color:blue;
    }

} /* end break point */

Here is a more robust fiddle