html - 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 different media queries for two different sizes.
I tried the following, but it does not work.
@ Media (minimum-width: 1280px) and (minimum height: 700 pix) {div # page-content {margin-top: 7%; .chef {max-width: 70%! Important; }}} Media (minimum-width: 1280 px) and (minimum height: 800px) {div # page-content {margin-top: 7%; .chef {max-width: 100%! Important; }}}
Thanks for any help
Try to be intermediate between both screens so always add some pixels as people can change the size of the screen, take the toolbar space, etc. Always leave room for a few lately, just as you are using the exact meaning of this, before it is feeling incorrect, the browser can not steal the pixel by you!
Try this:
@ Media (minimum-width: 1250px) and (max-height: 750 pixels) {// screen size 1280x700 (or larger than 1250 ) X (less than 750) media (minimum-width: 1250px) and (minimum height: 751px) // // 1280x800 screen size (greater than 1250) x (greater than 751)}
Comments
Post a Comment