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: 
```
@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)`
Yes, that's what the specification says.

CSS rules always override previous rules and `max-height: 768px` will always match for heights lower than 720.

Try reversing the order of the selectors.