Streaming live at 10am (PST)

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,
Sarah

You can also view the website by going to hge-international.com

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.

image

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.

Thanks!

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