CODEWITHSUNDEEP
htmlcss
Rocco The Taco
Rocco The Taco

Reputation: 3797

Conditional CSS based on min-width/max-width is ignored on Apple tablets

I have some conditional CSS based on @media specified with min-width and max-width to account for iPad tablet devices. This conditional CSS handles a div tag that is supposed to overlay a image slider underneath a header element. This works well on a PC but the div tag on a tablet finds itself under the header and above the image slider to where you have to drag the browser window in a downwards motion to view the div and when you release the drag it snaps back to hide under the header.

Here is the CSS below, I've changed the min/max values to different values as well as the top: element in the tablet screens with no luck. What am I doing wrong?

    @media (min-width: 801px) {
#searchIt {
    position:absolute; 
    top: 25px; 
    z-index:100;
    padding-left:14px;
    padding-right:10px; 
    margin:auto !important; 
    clear:both !important; 
    width:100% !important; 
    max-width:1165px !important;
    }
}

@media only screen 
     (max-device-width: 800px) 
  and (orientation: portrait) { 

  #searchIt {
    position:absolute; 
    top: 250px !important; 
    z-index:100;
    padding-left:14px;
    padding-right:10px; 
    margin:auto !important; 
    clear:both !important; 
    width:100% !important; 
    max-width:1165px !important;
      }

}

/* Landscape */
@media only screen  
     (max-device-width: 800px) 
  and (orientation: landscape) { 

  #searchIt {
    position:absolute; 
    top: 250px !important; 
    z-index:100;
    padding-left:14px;
    padding-right:10px; 
    margin:auto !important; 
    clear:both !important; 
    width:100% !important; 
    max-width:1165px !important;
      }

}

Upvotes: 4

Views: 9673

Answers (1)

Mir
Mir

Reputation: 126

Try this way 
iPad in portrait & 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 & 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 & 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 & 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 & 2 in portrait & 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 & 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 & 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 */ }

Upvotes: 6

Related Questions