Why is my CSS media query being ignored?

Question

Im trying to get this piece of CSS working on my ipad but it seems to be ignoring the media query and using the default wrapper CSS instead. is there a way I can stop this from happening?

@media only screen and (max-width: 1024px) and (max-height: 768px) {
    #wrapper {
        position:absolute; 
        z-index:1;
        top:41px;
        width:150px;
        height:300px;
    }    
}

#wrapper {
    position:absolute; 
    z-index:1;
    top:41px; 
    bottom:0px; 
    left:0;
    width:100%;
    height:800px;
    overflow:auto;
}

Answer 1

Aren't your media query styles being overridden by the later values rather than ignored? Have you tried moving the general styles before the MQ ones (I suppose you could also use !important, but that's generally a bad idea), or adding in another obvious style, like background: red; in the MQ one?

Answer 2

As a general rule, you should always write your media queries last in your stylesheet, so that the main styles are defined, and then the media queries come and override them at the end.