I am trying to use media queries, but they aren't working

Question

when i use width as my parameter "min-width" media queries work fine. but when i use min-height and max-height the last size i put in is the one that works. my code:

@media only screen 
and (min-height : 0px)  , screen and (max-height: 600px) {

#guy{
    position:absolute;
    top:180px;
    width:100%;
    height:680px;
    background:url(../img/guy.png);
    background-repeat:no-repeat;
    z-index:1;
    background-size: 650px 450px;
    }

}


@media only screen 
and (min-height : 601px)  , screen and (max-height: 800px)   {

#guy {
    position: absolute;
    top: 80px;
    width: 100%;
    height: 680px;
    background: url(../img/guy.png);
    background-repeat: no-repeat;
    z-index: 1;
    background-size: 450px 250px;
    background-position: center center;
    }

}


@media only screen 
and (min-height : 800px)  , screen and (max-height: 1000px) {

#guy {
    position: absolute;
    top: 160px;
    width: 100%;
    height: 680px;
    background: url(../img/guy.png);
    background-repeat: no-repeat;
    z-index: 1;
    background-size: 650px 450px;
    background-position: center center;
    }

}


@media only screen 
and (min-height : 1001px)  , screen and (max-height: 1600px) {

#guy {
    position: absolute;
    top: 220px;
    width: 100%;
    height: 680px;
    background: url(../img/guy.png);
    background-repeat: no-repeat;
    z-index: 1;
    background-size: 850px 650px;
    background-position: center center;
    }

}

@media only screen 
and (min-height : 1601px)  , screen and (max-height: 4000px) {

        #guy {
    position: absolute;
    top: 260px;
    width: 100%;
    height: 680px;
    background: url(../img/guy.png);
    background-repeat: no-repeat;
    z-index: 1;
    }

}

and no matter what the resolution of my screen, only the min-height : 1600px and max 4000px works, if I am not mistaken i can use height as a parameter correct? I also do not think there is a syntax issue. has anyone had this problem?

Answer 1

Looks like your media queries aren't written correctly. You have a comma after your first property and then redeclare screen. See:

@media only screen and (min-height : 0px)  , screen and (max-height: 600px) {

versus

@media only screen and (min-height : 0px) and (max-height: 600px) {

---

If you try this, it should start working:

@media only screen and (min-height : 0px) and (max-height: 600px) {

    #guy {
        position:absolute;
        top:180px;
        width:100%;
        height:680px;
        background:url(../img/guy.png);
        background-repeat:no-repeat;
        z-index:1;
        background-size: 650px 450px;
    }
}

@media only screen and (min-height : 601px) and (max-height: 800px) {

    #guy {
        position: absolute;
        top: 80px;
        width: 100%;
        height: 680px;
        background: url(../img/guy.png);
        background-repeat: no-repeat;
        z-index: 1;
        background-size: 450px 250px;
        background-position: center center;
    }
}

@media only screen and (min-height : 800px) and (max-height: 1000px) {

    #guy {
        position: absolute;
        top: 160px;
        width: 100%;
        height: 680px;
        background: url(../img/guy.png);
        background-repeat: no-repeat;
        z-index: 1;
        background-size: 650px 450px;
        background-position: center center;
    }
}

@media only screen and (min-height : 1001px) and (max-height: 1600px) {

    #guy {
        position: absolute;
        top: 220px;
        width: 100%;
        height: 680px;
        background: url(../img/guy.png);
        background-repeat: no-repeat;
        z-index: 1;
        background-size: 850px 650px;
        background-position: center center;
    }
}

@media only screen and (min-height : 1601px) and (max-height: 4000px) {

    #guy {
        position: absolute;
        top: 260px;
        width: 100%;
        height: 680px;
        background: url(../img/guy.png);
        background-repeat: no-repeat;
        z-index: 1;
    }
}

Here's a working codepen example: http://codepen.io/kpeatt/pen/pkDxq — resize the height of the frame to see it in action.