Streaming live at 10am (PST)

Resizing collection item images

Hi Webflow community,

You’ll be sick of my website by now. But I promise I’m almost there!! And understanding a lot more thanks to your help.

My question is on resizing collection item images. I tried messing about with the sizes on the side and even uploading smaller images but they don’t seem to sit nicely in a line when I do that.

How do I get them all to look the same size?

Thanking you


Here is my site Read-Only: https://preview.webflow.com/preview/just-julia-blog?utm_medium=preview_link&utm_source=designer&utm_content=just-julia-blog&preview=fa3a74d5452e09ac3abb826b3d152020&mode=preview

Live site: www.justjulia.co (the issue is on the home page under ‘Dating + other stuff’)

looks like you have not set class width or height parameters (or just min/max height) for the .image-9 class. Once you do that (and set overflow to hidden) you should have them all looking identical.

Hope that helps.

1 Like

Thanks so much. I didn’t realise there was a set overflow to hidden option.
I assume setting the width or height parameters to 100% will not be a good idea as it will allow the images to be different sizes? What would you recommend setting the min/max heights to?

Hi again studiopowell and Webflow-ers,

I gave that a try but it doesn’t seem to make much difference, except my images look a bit stretched. Any ideas why they might not be looking the same height?

https://preview.webflow.com/preview/just-julia-blog?utm_medium=preview_link&utm_source=designer&utm_content=just-julia-blog&preview=fa3a74d5452e09ac3abb826b3d152020&mode=preview

Thanks in advance,

Julia :slight_smile:

@jmarygraham You are so close!

Your captions are different (two of them have 2 lines, and one as 1 line). That is fine, but it means you need to position the captions “Absolute”.

If items are relative or static they will position themselves in relation to what is around them. By positioning the captions absolutely, it will allow their parent containers to naturally align as relative items within the wrapper.

Hope that helps!!

1 Like

Hi again Michael @studiopowell, Thanks so much for your patience :smiley:

I’ve tried that and yaaaay, the images sort themselves out. I must have something not quite right in the settings though as the text is overlaying some of the other headings:

(Read only link: https://preview.webflow.com/preview/just-julia-blog?utm_medium=preview_link&utm_source=designer&utm_content=just-julia-blog&preview=fa3a74d5452e09ac3abb826b3d152020&mode=preview)

Any ideas what I might have messed up?

Many thanks,

Julia

@studiopowell Michael, it’s OK. I’ve sorted it. Shoutout to @Jeandcc for this.

If anyone is reading this and struggling with the same issue:

Go to Posts Collection List (not the wrapper one), then on the side bar under Layout select Align - Stretch

Thanks to both of you :slight_smile:

1 Like