Distorted image ratios on mobile (list timeline block)

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

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


1 Like

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


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

Hey @hdkstr,

Please try this code

	img.mfp-img {
	    min-height: auto!important;
1 Like

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?

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

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

Hey Harold,

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

1 Like