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!
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
Select the images, click the gear icon and remove the fixed height value.
Let me know if this helped you fix this
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.
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
I see! Thank you very much, I tried out the method you did and it worked, I understand now where you were coming from !!