Media query for same width different heights

Question

Best way to apply media query for same width and different heights ?

For example i have this sample code

    @media screen and (max-width: 1366px), screen and (max-height: 657px){
        article#chapterthankyou{
        width:984px;
        }

    }

and

@media screen and (max-width: 1366px), screen and (max-height: 768px){

         article#chapterthankyou{
        width:1048px;
        }

    }   

The problem is, even on 1366 X 657 the article#chapterthankyou{ width:984px; } style is applied.

How can i accurately apply height width conditions ? Thanks

Answer 1

You are close, but according to this article on the MDN, you are a little off with your logical operators.

For your code, try using this:

@media screen 
and (max-width: 1366px)
and (max-height: 657px){

        article#chapterthankyou{
        width:984px;

        }
    }

And...

@media screen 
and (max-width: 1366px)
and (max-height: 768px){

        article#chapterthankyou{
        width:1048px;

        }
    } 

If this still does not work, then refer here for a list of different media queries, which you might find useful.