How to set portrait and landscape media queries in css

Question

Here is my media query    media screen and  min-device-width  768px  and  max-device-width  1824px  and  orientation   portrait      hidden-desktop       display  inherit  important         visible-desktop       display  none  important          visible-tablet       display  inherit  important         hidden-tablet       display  none  important          media screen and  min-device-width  768px  and  max-device-width  1824px  and  orientation   landscape      hidden-desktop       display  inherit  important         visible-desktop       display  none  important          visible-tablet       display  inherit  important         hidden-tablet       display  none  important         media screen and  max-device-width  767px  and  orientation  portrait       hidden-desktop       display  inherit  important         visible-desktop       display  none  important         visible-phone       display  inherit  important         hidden-phone       display  none  important         media screen and  max-device-width  767px  and  orientation  landscape       hidden-desktop       display  inherit  important         visible-desktop       display  none  important         visible-phone       display  inherit  important         hidden-phone       display  none  important           But in tablet  If it is in landscape mode  this div is showing    visible-tablet       display  inherit  important        If it is in portrait mode  this div is showing   visible-phone       display  inherit  important        I want this div   visible-tablet to be showing always whenever I switch my tablet to auto-rotate mode which will be for portrait and landscape   But I used portrait and landscape conditions  but still I am facing this issue  Any comments

User · Answer

It can also be as simple as this    media  orientation  landscape

User · Answer

iPad Media Queries  All generations - including iPad mini   Thanks to Apple s work in creating a consistent experience for users  and easy time for developers  all 5 different iPads  iPads 1-5 and iPad mini  can be targeted with just one CSS media query  The next few lines of code should work perfect for a responsive design   iPad in portrait  amp  landscape   media only screen  and  min-device-width   768px   and  max-device-width   1024px        STYLES GO HERE       iPad in landscape   media only screen  and  min-device-width   768px   and  max-device-width   1024px   and  orientation   landscape       STYLES GO HERE       iPad in portrait   media only screen  and  min-device-width   768px   and  max-device-width   1024px   and  orientation   portrait       STYLES GO HERE        iPad 3  amp  4 Media Queries  If you re looking to target only 3rd and 4th generation Retina iPads  or tablets with similar resolution  to add  2x graphics  or other features for the tablet s Retina display  use the following media queries   Retina iPad in portrait  amp  landscape   media only screen  and  min-device-width   768px   and  max-device-width   1024px  and  -webkit-min-device-pixel-ratio  2       STYLES GO HERE       Retina iPad in landscape   media only screen  and  min-device-width   768px   and  max-device-width   1024px   and  orientation   landscape  and  -webkit-min-device-pixel-ratio  2       STYLES GO HERE       Retina iPad in portrait   media only screen  and  min-device-width   768px   and  max-device-width   1024px   and  orientation   portrait  and  -webkit-min-device-pixel-ratio  2       STYLES GO HERE        iPad 1  amp  2 Media Queries  If you re looking to supply different graphics or choose different typography for the lower resolution iPad display  the media queries below will work like a charm in your responsive design   iPad 1  amp  2 in portrait  amp  landscape   media only screen  and  min-device-width   768px   and  max-device-width   1024px   and  -webkit-min-device-pixel-ratio  1      STYLES GO HERE       iPad 1  amp  2 in landscape   media only screen  and  min-device-width   768px   and  max-device-width   1024px   and  orientation   landscape  and  -webkit-min-device-pixel-ratio  1        STYLES GO HERE       iPad 1  amp  2 in portrait   media only screen  and  min-device-width   768px   and  max-device-width   1024px   and  orientation   portrait   and  -webkit-min-device-pixel-ratio  1       STYLES GO HERE        Source  http   stephen io mediaqueries

[html] How to set portrait and landscape media queries in css?

Examples related to html

Examples related to css

Examples related to media-queries