Issue with "Multi-images-fields" used as a gallery in a Collection

Hi Webflowers! I have created a photo gallery with Multi-image field. It was very difficult to do it, because the pictures were not neat, they were just stretched out, the width and height looks ugly, .

Then I got help from a mentor in a webflow group, and he gave me this code

.lightbox-img { object-fit: cover; }

and then it looks very very nice!!

BUT!!! - not in Ipad and Iphone, it doesn’t look pretty good there. When you drag it out with Ipad and iphone, you see that it doesn’t look nice, Becaus in Ipad there are 2 rows and when you drag it out the 2 rows on each side are going on the left and right, and in the middle is a huge hole there is nothing. And in iphone landscape there is only one row and in iphone Portrait the row is to the right and is too with. How do I fix this problem so the gallery looks good in all breakpoints?
Here is my sharelink
Thanks a lot for your help :smiling_face_with_three_hearts:

Are you talking about in the grid for the collection thumbnails? You can bypass needing any custom code by simply applying a background image to pull from the multi image by selecting the Lightbox link and saying get bg image from collection. Then go into the style pane and set the background image to cover.

Thanks a lot!
I have tried to do a background image I it don’t work for me? And it is done with flex not grid :blush:

Hi again! Did you find another solution for me?

Collection lists have their own grid system that I think works better than using flex. But that doesn’t affect what we are talking about. You just need to choose set background image from the multi image field in the Lightbox link. Then go into the style panel and under background image click cover. it’s pretty easy.

Thank you! But it is still the same problem! I have set background image from the multi image field in the Lightbox link. Please see my video:
and my sharelink

You need to remove flex from your styling.