Streaming live at 10am (PST)

Image Grid will not align

I am trying to publish a site but the images in the gallery will not align. All images are the exact same size but still show up uneven when the site is published. Please help!


Here is my site Read-Only: LINK
https://preview.webflow.com/preview/parallel-72f37f?utm_medium=preview_link&utm_source=designer&utm_content=parallel-72f37f&preview=9f224caa7dd8c53b889d5f27cfb3926c&pageId=5f92e66834a0a463346abdf2&workflow=preview


Hey there!

Looks like the width on your images is set to 100% which is allowing them to expand width-wise to their original size. Since they are all different sizes you are seeing the mismatch sizing in the grid. This is so because when set to 100% width the image will attempt to expand width-wise to it’s parent element the collection item which itself has not fixed width allowing it expand width-wise along with it’s parent the collection list all the way to the edge of the viewport (less 50 px on each side that you set for padding). If you give the images a fixed width in px or even vw or vh if you want to be more responsive you should not run into this issue. This is just one way to accomplish this of course.

I hope this give you some clarity!

Hey Kyle,

Really appreciate you reaching out. Each image is set to a fixed Width and Height as you can see in the attached image. Are you able to give me a little more clarity on how to resolve this, just a little confused by what you mean? Thank you!

If you change the width on the image with class: “img-photos” from width:100% to say width:400px you should see the issue resolve. It won’t be super responsive but will no longer display images at random widths.