CODEWITHSUNDEEP
htmlcss
Anonymous
Anonymous

Reputation: 1031

Mediaquery based on window width and height

I am trying to understand how a media query works.

I have two windows, one is 1280X700 and the other one is 1280X800.

I need to create two separate media queries for the two different sizes.

I tried the following, but it does not work.

@media (min-width:1280px) and  (min-height:700px){
    div#page-content{    
               margin-top: 7%;

        .chef{
            max-width: 70% !important;
        }
   }
}  

@media (min-width:1280px) and  (min-height:800px){
    div#page-content{    
               margin-top: 7%;

        .chef{
            max-width: 100% !important;
        }
   }
}

Thanks for any help

Upvotes: 0

Views: 231

Answers (1)

somethinghere
somethinghere

Reputation: 17340

You should try the intermediate between both screens then. Always add a couple of pixels as people could resize the screen, toolbars take space, etc.. Always leave a little bit of wiggle room as the precision you are using means that the browser cannot steal a pixel from you before it looks wrong!

Try this:

@media (min-width:1250px) and  (max-height:750px){
    // screen size for 1280x700 or (larger than 1250)x(smaller than 750)
}  

@media (min-width:1250px) and  (min-height:751px){
    // screen size for 1280x800 or (larger than 1250)x(larger than 751)
}

Upvotes: 3

Related Questions