One of two CSS media queries not taking course

Question

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:

possible duplicate of [Media queries: max-width OR max-height](http://stackoverflow.com/questions/11404744/media-queries-max-width-or-max-height) — Brian Dillingham, Sep 07 '14 at 08:05
@pstenstrm keep the width larger than 800 px and the height smaller than 615 and you will see the height rule is not working. — Alin, Sep 07 '14 at 08:05
@Alin It really does work, when my window is smaller than 820px and lower than 615px the box is red and centered, if the window is higher than 615px its grey — pstenstrm, Sep 07 '14 at 08:08
Yes, but i need it to be smaller if the window is smallern than 820 OR lower than 615, not AND, Mary Melody's answer fixes that for me :) — Alin, Sep 07 '14 at 08:10
@Alin You said that "Mary Melody's answer fixes that for me" then why didn't you accept my answer??? please don't mind lol... :) — Anonymous, Sep 07 '14 at 08:25
@marymelody sorry for the inconvenience, In my comment I wanted to say you and Brian's answer, the only reason I picked Brian's answer is cause he took the time to explain why he did what he did. The least I could do is vote up for you, which I did but someone else voted down. Sorry and Thank you. — Alin, Sep 07 '14 at 08:36

Anonymous · Answer 1 · 2014-09-07T08:16:24.153

3

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;
    }
}

edited Sep 07 '14 at 08:16

answered Sep 07 '14 at 08:04

Anonymous

10,002
3
23
39

Brian Dillingham · Accepted Answer · 2014-09-07T08:09:56.850

2

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

edited Sep 07 '14 at 08:09

answered Sep 07 '14 at 08:04

Brian Dillingham

9,118
3
28
47

One of two CSS media queries not taking course

2 Answers2