@media queries in CSS

Question

I have the following CSS to align page content within different brower sizes. However or some reason it does not like the first @media statement, in other words changing anything in there does not do anything to the layout. I use http://quirktools.com/screenfly/ to verify the layout.
Changing the sequence of the statements will mess things up as well. I am lost

Your help is greatly appreciated

Thanks

@media (min-width: 500px) and (max-width: 820px) {
CSS HERE
}
@media (min-width: 830px) and (max-width: 1025px) {
CSS HERE
}
@media (min-width: 1026px) and (max-width: 1580px) {
CSS HERE
}
@media (min-width: 1590px) and (max-width: 2000px) {
CSS HERE 
}

Answer 1

First you want to define a screen size for anything larger than, from there you make your media queries for the sizes in between.

Here is an example.

/* Large desktop */
@media only screen and (min-width :75.000em) {
    .test {
        display: none;
    }
}

/* Portrait tablet to landscape and desktop */
@media only screen and (min-width :61.250em) and (max-width:74.938em) {
    .test {
        display: block;
        color: #FF0;
    }
}

/* Portrait tablet to landscape and desktop */
@media only screen and (min-width :48.000em) and (max-width:61.188em) {
    .test {
        display: none;
    }
}

/* Landscape phone to portrait tablet */
@media only screen and (min-width :30.063em) and ( max-width :47.938em) {
    .test {
        display: none;
    }
}

/* portrait phones and down */
@media only screen and (max-width :30.000em) {
    .test {
        display: block;
        color: #FF0;
    }
}