Collection List - On Phone mode the images are squished & on Safari, my list items vertical are too far away

Hello there!

I am having a bit of trouble with my images when I have added them to the collection list, once I have added the collection list on to my website, on phone mode it seems squished.

Do the images need to be smaller? How would you propose that I do this?

Also when I use safari on the laptop, the list items seem too far away from each other and I am not sure what to make sure it looks correct on all browsers.

Do let me know!

Best regards,

You can also view the website by going to

Here is my site Read-Only: LINK

Hey Sarah! Welcome to the forum!

The images get squished because you gave them a fixed height of 300px but set the width to 100%. Remove the 300px and set it to auto, this will make the images scale properly :slight_smile:

Select the images, click the gear icon and remove the fixed height value.


Let me know if this helped you fix this :slight_smile:

Hi Fabian!

Thank you :slight_smile:

Although that did help for the phone version, the issue with that it also make my other image on desktop not aligned once I change it to auto.


1 Like

If you give the images themselves a height value, you can’t modify it for different breakpoints responsively!

Remove the height value of the image itself, then give the class of the image or it’s parent element a max-height value (you can set different values for different breakpoints!).

You also need to give the images a different display option. I’m on short time, so I made a short gif that shows the nessesary changes!

I can explain the why’s later if needed :slight_smile:

I see! Thank you very much, I tried out the method you did and it worked, I understand now where you were coming from :smile:!!

1 Like