Images not adjusting to the width on mobile devices

Product Support

AI-generated summary

Images not adjusting to the width on mobile devices: A recent update caused horizontal images to not adjust to the page width on mobile devices, requiring a click to view the full image. This change was intentional This commit, but has caused issues, particularly with gifs and photographically-based communities.

A temporary CSS fix was provided by Don: adding height: auto; to .cooked, .d-editor-preview img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji). However, pmusaraj has since reverted the commit, and the fix should be available shortly in the tests-passed branch.

Multiple users, including Moin and Richie, reported issues with the change, citing problems with gifs and the need to guess if there’s more to an image than what’s visible.

1

Hi, since one of the last updates (a few days ago) there has been a change in the responsive images.
Now, horizontal images don’t adjust to the width of the page, so if you want to see the complete image, you need to click on it. However, this bug (?) doesn’t happen in the desktop version.

I show you an example of this issue:

image
image1080×1571 74 KB

image
image1080×1582 87.1 KB

I haven’t changed any settings so I guess this is a part of one of the last updates. Was this made on purpose? Is there any way to change it so the preview of the image adjust always to the width of the page?

Thank you!

2

This commit changed it.

You can revert it if you want. Add the following to css.

.cooked,
.d-editor-preview {
  img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji) {
    height: auto;
  }
}
3

So the change was intentional, that you need to click almost every image on mobile to view the whole image in the lightbox?
.

_20220204_092221
_20220204_092221720×1129 102 KB

So you need to guess, that there is more than you can see and need the lightbox to check
_20220204_092257
_20220204_092257720×1131 92.5 KB

4

Yes, I checked this closely now and it seems to, it can cause problem with no lightbox media. For example gifs. Because the click action on gifs is pause.

Screenshot_20220204_092750_com.android.chrome
Screenshot_20220204_092750_com.android.chrome1080×2240 292 KB

5

Gifs are warped for me

_20220204_093652
_20220204_093652720×1125 119 KB

So there is all the information, but the people are quite slim

6

Yeah that is what I’m talking about :grinning_face_with_smiling_eyes:

7

Thanks for the report, I can reproduce this as well, we will look into a fix.

10

This is quite disastrous for us as our community is heavily photographically based.

Desktop:

image
image637×500 48.5 KB

And how it appears on mobile:

image
image245×500 19.4 KB

Thanks for the CSS @Don we might apply this as a temporary fix :slight_smile:

And thanks @pmusaraj for jumping on the issue :slight_smile:

11

Thanks all, I have reverted the commit linked by Don above, so this should be fixed shortly in the tests-passed branch.