Media query precedence

Question

I have the following media queries:

@media all and (max-height: 720px) and (min-width:1px) {
    .tabeditor {
        height: 60%;
    }
}

@media all and (max-height: 768px) and (min-width:1px) {
    .tabeditor {
        height: 63%;
    }
}

When I run it on 1280X720 I see that the height from query with 768px takes over. Is that correct? I am running it in Chrome.

Thanks for help.

Answer 1

@media all and (max-height: 720px) and (min-width:1px) 
{
    .tabeditor {
        height: 60%;
    }
}
@media all and (max-height: 768px) and (min-height : 721px) and (min-width:1px) 
{
    .tabeditor {
        height: 63%;
    }
}

You might also need a @media all and (min-height: 769px) and (min-width:1px)