CODEWITHSUNDEEP
cssmedia-queries
Mark
Mark

Reputation: 4950

Media query precedence

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.

Upvotes: 6

Views: 5843

Answers (3)

Jaaaaaaay
Jaaaaaaay

Reputation: 1975

@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)

Upvotes: 2

Peter Wilson
Peter Wilson

Reputation: 4319

You have to use 

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

and so when you are on 720px height the 768px media query will not take effect

Upvotes: 0

Amit
Amit

Reputation: 46331

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.

Upvotes: 0

Related Questions