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?
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
We will look into this tomorrow morning. Should be an easy fix I think.
Thanks @artur, that would be perfect timing
Please try this code
Thanks @Suzie, this works great The images are now opening in the right aspect ratios on mobile devices
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.
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
Thanks for the update. Will double check this with the team as well.