CODEWITHSUNDEEP
htmlcssmedia-queries
Alin
Alin

Reputation: 1228

One of two CSS media queries not taking course

I want to add media queries for a div to change position when the screen width is smaller than 820px and/or height smaller than 615px, so I made this:

@media screen and (max-width:820px) and (max-height:615px){
    #wrap{
        width:800px;
        height:610px;
        position:relative;
        margin:0 auto;
        top:100px;
        overflow:hidden;
        background:red;
    }
}

The condition that the width is no smaller than 820px works, but not the height...what am I doing wrong?

Here's a jsFiddle so you can get an easier understanding:

Upvotes: 2

Views: 84

Answers (2)

Anonymous
Anonymous

Reputation: 10216

You could do it like below code this:

html:

@media screen and (max-width:820px) , screen and (max-height:615px) {
    #wrap{
        width:800px;
        height:610px;
        position:relative;
        margin:0 auto;
        top:100px;
        overflow:hidden;
        background:red;
    }
}

Upvotes: 3

Brian Dillingham
Brian Dillingham

Reputation: 9356

Comma separate the rules to render CSS when one or another rule is true

@media screen and (max-width:820px), screen and (max-height:615px) {
  ...
}

Saying and for each rule is saying the entire statement has to be true for the CSS to take effect.

Comma separating the rules is equivalent to or

Upvotes: 2

Related Questions