Collection item looks different in published view

Design help CMS
1

Hi,

I built my website using CMS collection, the image is supposed to fill each column of my website, but when I published it the size of the image content changes drastically. What is going wrong?

This is the designer view

Screen Shot 2020-11-17 at 11.59.55 PM
Screen Shot 2020-11-17 at 11.59.55 PM1032×739 65.8 KB

This is the published view

Screen Shot 2020-11-17 at 11.59.46 PM
Screen Shot 2020-11-17 at 11.59.46 PM1308×768 33 KB

Here’s a read only link:
https://preview.webflow.com/preview/visibleobjectsinvisiblethings?utm_medium=preview_link&utm_source=designer&utm_content=visibleobjectsinvisiblethings&preview=e85e237db7736e57956ea444888c225e&pageId=5fb1d0d5edfe9d79a3a16352&mode=preview

Thanks!

2

My CMS items area also doing crazy things. Safari will make them full width while chrome ads tons of space between them on top and bottom…I submitted a ticket through my site.

3

I just checked my site and found a solution
what works for me is to change the width of the collection image setting from auto to 600px.

Screen Shot 2020-11-18 at 12.20.17 AM
Screen Shot 2020-11-18 at 12.20.17 AM1393×783 116 KB

Hope that works out for you too.

4

is your site only doing this with CMS items? Do you get different results in safari v chrome?

5

yes. it’s only doing it for collection items, I tested with normal images and it’s fine. and it works for chrome and safari