Issue with photo display for images submitted into CMS

For some reason I cannot get the photos that were part of a collection to display correctly. I made event cards with a collection list. I would like the photos to fill the container size, to not be distorted, and to display from the center and show as much of the photo as possible within the confines of the container.

For some reason, none of the Fit options work. Fill, Cover, Contain, Scale Down all do the same thing within this project. I have no luck with the None setting, as it just zooms to a grainy level. The Position Settings don’t work at all. What’s the issue?

If I cannot get this to work, would it be somehow possible for the client to position each event photo?

Also, sorry, if you have a screen larger than 1164, as I have not made it responsive yet. Speaking of which, how do I make these collection items in grid view to “flex” to become wider or smaller for responsiveness?

Here is my public share link: [LINK]1
(how to access public share link)

To make Image Fit (object fit) option work properly width/height should be applied to the image directly, it creates the constraints for the image.

Another thing, there is issue with your implementation. You’ve max-height set to collection item that is why your image is stretching upto that height. You can actually remove the height on the collection item and apply width/height on the image (check the last screenshot). If you need to apply height/width to a parent DIV of the image then apply height/width = 100% to the image.

Example of image fit implementation.

1 Like

Thank you, I was able to fix the image issue! Although, I’m curious how to set the grid to stretch wider at larger breakpoints? The grid is over my head, whatever I managed here may have been by mistake.

Also, maybe even more importantly, how can I make these event cards link to their respective page? When I tried to insert the collection list item inside a link block, it would not allow it.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.