Change width and height of image for Portrait and Landscape iOS orientation

Question

I am using the following code on my site to reduce the size of a div on ipad portrait orientation and it is working successfully.

@media only screen and (min-width: 768px) and (max-width: 959px) {
   .mosaic-block {
      width: 226px;
      height: 135px;
    }
}

However, when i change the orientation to landscape, the div keeps the same value instead of returning to the default larger size of the div.

If the site is loaded directly into landscape mode - it display correctly (in the larger size).

How can i make sure that the larger css div dimensions are applied when the user switches orientation from portrait to landscape?

Answer 1

I don't think your media query is correct - the ipad width/height doesn't change when it is rotated, only the orientation changes. Try updating your media queries to something like:

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  .mosaic-block {
    /* default size here */
  }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  .mosaic-block {
    width: 226px;
    height: 135px;
  }
}

Reference: CSS-Tricks media queries

Answer 2

This helped me correctly target iPad portrait. It turns out that I was correctly resizing the .mosaic-block but should have been resizing the contained image.

I am using the amazium framework for responsive design and mosaic.js for the animated rollovers. Here is the complete HTML:

<div class="mosaic-block fade">

<a href="image.jpg" rel="shadowbox" target="_blank" class="mosaic-overlay details"
title="Title">
        <h4>A title</h4> 
        <p><span>Subheading:</span></p>
        <ul>
            <li><p>Some text</p></li>
            <li><p>Some more text</p></li>
            <li><p>Even more text</p></li>                                                              
        </ul>   
</a>
<div class="mosaic-backdrop"><img src="backdrop_image.jpg" class="max-image"/></div>

Amazium uses the .max-image rule to alter the image size at different resolutions:

.max-image  { width:100%; height:auto; }

My solution has been to set a specific image size for .max-image on ipad portrait:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
.max-image {
width:286px;
height:171px;
}
}

Many thanks for the advice Mr. JunkMyFunk.