Search code examples
cssmedia-queries

CSS media query to display certain stuff in portrait and landscape mode

I have a div on a page that I dont want to display for a iphone 5 (portrait width of 374px or less). But if I rotate to landscape, the div is displayed. How can I write a media query that says, if the screen has a max-width of 374px in portrait mode, then apply the css when in lanscape mode too?

Solution

  • The iphone 5 has a landscape width of 568px so you can use this info with orientation and max-device-width like so:

    @media screen and (max-width: 374px), 
       screen 
       and (max-device-width: 568px) 
       and (orientation: landscape) {

    /* styles here for iphone 5 landscape + any screen below 374px */
    .hide-content-iphone5 {
      display: none;
    }
}

    The comma in the media query signifies "or" -- so it captures screens that are either less than 374px or have a max device width of 568px and are on landscape orientation.