Fix Image Distortion in Mobile Portrait Format

Design help Layout & Design
1

How do I fix some of the images that appear distorted in the Mobile Portrait format? Thanks, Robert

https://preview.webflow.com/preview/dutch-poet-press?utm_medium=preview_link&utm_source=dashboard&utm_content=dutch-poet-press&preview=40f87a50b0d7489b3e91ef530ed16de6&workflow=preview

Also see dutch-poet-press.webflow.io on your mobile.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey Robert,

can you specify which images get distorted? I didn’t see distorted images. Maybe post a screenshot?

3

Here’s part of the Letterpress page. Thanks!

College.

poem

endpaper

4

Here’s another sample:

letterpress

vier seizoenen

Vier Seizeonen (Four Seasons)
Poem by Robert Perry

Broadside edition of four-stanza poem printed with digital photo polymer plates by Matt Kelsey and designed by the poet Robert Perry in April 2019.

Edition of 100 | $30 each

5

I’m not sure you meant to copy the html?!
Can you provide a screenshot of the distorted images?

6

Weird? The image looks fine but it’s not. I copied and pasted this from my phone where the problem is.

Suggestion?

Thanks,
Robert

7

I’m not sure what you mean with distorted, the images seem to have proper aspect ratios and are neither stretched or squished.

If you could provide a screenshot (a picture of your screen) I might understand what you mean.

8

If you type in the url of dutchpoetpress.com into Safari on your phone. You should see it.

Or here is a photo of the site page on my friend’s phone.

Does that help? Thanks!

IMG_5300.jpg
IMG_5300.jpg480×640 49.5 KB

9

Thanks, now I see!

For me, viewing it in firefox or chromium - it looks fine.
I don’t own any apple device and since apple pulled safari from all competitors devices, I can’t test it at all.

It’s probably as issue with some difference in webkit - but I’m unable to test this further - sorry!

10

Thanks for trying. What do you mean … some difference in webkit?

11

Not all browser are build the same. Firefox, Chromium, Safari - they all are build from different code bases. This leads to differing behavior and look for the same website and can be frustrating for developers (as you now know :dizzy_face:).

Try different stylings with the images, like explicitly setting dimensions and different display settings for the images and the parent element. Sorry I can’t be of more help… Maybe there’s someone else here that is more affine of macs and willing to help!

If you are interested in the background, here’s a short but insightful article

12

Many thanks! Very helpful.