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