Distorted image ratios on mobile (list timeline block)

Ask the community
1

Hi all :wave:

I’m setting up a list with timeline block, including images (see screenshot 1). When a visitor clicks on those images, the concerning image opens as in a modal. On desktop this works perfect, in the right aspect ratios. However, when opening on a mobile device the size ratios get completely distorted (see screenshot 2).

Is there a way to make sure the images show up correctly on mobile devices too?

Image in list with timeline block
Image from timeline opened on mobile device

1 Like
2

Inverting ratios of images is the only fix I found.
Here is an example of image with the right ratio to make it work on mobile when the image is clicked

Capture56

1 Like
3

We will look into this tomorrow morning. Should be an easy fix I think.

2 Likes
4

Thanks @artur, that would be perfect timing :ok_hand:

5

Hey @hdkstr,

Please try this code

<style>
	img.mfp-img {
	    min-height: auto!important;
	}
</style>
1 Like
6

Thanks @Suzie, this works great :raised_hands: The images are now opening in the right aspect ratios on mobile devices :smiley:

Perhaps you also have a solution for this related question:

On mobile devices, the timeline block itself shows a lot more white spaces around the images compared to desktop.

Maybe this is also because the images are transformed to other aspect ratios?

7

Perhaps this can be because of the configurations, seems like you have set height for images and background size to contain.

8

Hi Suzie,

I solved it now by copying the timeline block and changing visibility by device.

But if we just look at the timeline block itself: the image ratios as shown on mobile devices are different than when shown on desktop.

This seems to be a related problem as the other one above.

Note: It seems I can’t add screenshot here atm

9

Hey Harold,

Thanks for the update. Will double check this with the team as well.

1 Like