Images distorted on iPhone only

Hello,

I solved the issue with some CSS coding and an adjustment to my image styles.

The code is as follows:

In 'my-custom-ff-md-queries.css', I added (note I changed the small screen from 320px to 480px):

/* Landscape smartphones, narrow tablets and below */

@media screen and (max-width: 767px) {
.big-post-box img,
.big_post_box img {
height: inherit;
width: auto;
width: 100%;
}

.post-box img,
.post_box img {
height: auto;
max-height: 281px;
width: auto;
width: 100%;
}
}

@media screen and (max-width: 480px) {
.post-box,
.post_box {
width: auto;
float: none;
max-width:100%;
margin: 0 auto;
min-height: 281px;
}
}

In the file my-custom-ff.css, I added:

.big-post-box img, .big_post_box img {
max-width: 562px;
}

.big-post-box img,
.big_post_box img {
width: auto;
max-height: 562px;
display: block;
margin: 0 auto;
}

.post-box img, .post_box img {
width: auto;
max-width:100%;
max-height: 212px;
display: block;
margin: 0 auto;
}

Then, in the image styles, I added:

Thumbnail image style
Scale 281x281 (upscaling allowed)
Scale and crop 281x281

Medium image style
Scale and crop 562x562

It works now on the iPhone and other devices.

I hope that helps someone.

M