is it possible to have a 4 stage media query-CodePudding

I am wondering if it is possible to have a four stage media query what I mean by this is to have a max and min width as well as a max and min height in a media query an exmaple for what I am meaning is the following.

@media only screen and (max-width: 400px) 
and (min-width: 300px) and (max-height: 500px) 
and (min-height: 600px){ .this-is-a-test-class{
padding-bottom: 100px ;
}
}

Above is what I think it would be if this is possible but I could not get it to work so any advice would be great or if there is a way to do this in 2 separate media query but only run if the other objective is met.

CodePudding user response：

I was able to get this working by doing this

@media only screen and (max-width: 900px) and (min-width: 778px) and (max-height: 840px) {
    .slider-orange-text{
        padding-bottom: 200px ;
    }   
}

Not sure why it didn't work prior but this is now working however this was with only using a max height and not a min also

CodePudding user response：

Your rule should be working.

THe issue is that min-height has a higher value than max-height. Make sure max-height is higher than min-height and it will be fine:

@media only screen and (min-width: 300px) and (max-width: 400px) 
   and (min-height: 500px) and (max-height: 600px) { 
    .this-is-a-test-class{
      padding-bottom: 100px;
    }
}

CodePudding user response：

Yes, though you need to set your width and height limits correctly. The following works for when the page has a width and height both between 300px and 400px

@media only screen and (max-width: 400px)
and (min-width: 300px) and (max-height: 400px)
and (min-height: 300px) {
    .this-is-a-test-class {
        background-color: hotpink;
    }
}