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.
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
Select the images, click the gear icon and remove the fixed height value.
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!
!!