I am working on my collection page and I’m have trouble removing the extra space in my image gallery. The gallery is imported from a multi-image gallery CMS list. The first 6 images are aligned next to each other perfectly but for some reason, the last two are not sitting at the same level. All of the images are the same dimensions.
Does anyone know how to fix this?
@Mekinsa - Because you are using columns which is based on CSS Floats. Should not be used. The recommended approach is to build with Flex or Grid instead. Head over to the WFU to learn how.
I had a similar issue when designing a page to list my products. I simply changed the height field of the image from ‘Auto’ to ‘Px’ and made a small size reduction, and they aligned properly.
Probably not the right way to go about it, but it worked and I haven’t had the issue recurring since. I believe the auto sizing was preventing proper alignment for whatever reason.
Im not using any columns. The collection list is placed in a Div Block. The issue is happening somewhere with the image inside the collection list.
This worked only on that specific collection page. On some of my other collection pages, the images are square. Changing the image height from “auto” to “px” caused those images to become morphed.
I fixed it by making sure each image in the gallery was the same size (resizing the images on Photoshop), then re-uploading them to Webflow.
