Tiny CMS Images - Already 100% width

Hey peeps,

I know this is a topic that has been posted to death here, but I’m having a unique twist to this problem. I solved this (barely) on my live site already, but I left a page open with the broken version because I’m truly stumped on how to avoid this in the future.

I have two identical collection lists. Same classes, animations, plugged into the same CMS. One is broken on the live site, the other isn’t. Here’s a read-only link, and here’s the live site. This is either a bug, or I’m missing something obvious here. How is one broken and the other isn’t?

Proposed solutions:

  1. Set the images at 100% width. But… they already are. In fact, the image is set to 100%, and so is its link div, the collection item, list, and wrapper.

  2. Disable responsive images. But apparently Webflow only responsifies images that come from the asset manager, not CMS. In fact, pressing CMD+SHIFT+O does nothing when I have these images selected.

However, not only do these solutions not work, they don’t explain why one collection list works and the other doesn’t. Anyway, again, I’m sure I’m missing something really obvious, but I’d like to know what it is to avoid ths issue in the future.

Cheers!

Hi @dcmaia, thanks for your reply. I think there might be something going on with the flex child basis setting on the section that is setting child elements to shrink if possible or some combination of display flex and display grid along with the collection list, I have not zeroed in on it exactly yet.

I had changed the section from display flex to display block on the section, then the issue seem to have disappeared.

This could also be some wonky style conflict between the display flex set on the section and the display grid set on the collection list.

I hope this helps!

.cyberdave

Dave, thanks for replying. You’re right. This did fix it.

Awesome as it is to find a fix, I’m still left wondering how this can happen… How come only one of the sections was broken? They both had the same classes. Is it a bug?

Hi @dcmaia,

Thanks for your reply, well, I would have to do some additional checking, I do not think it is a bug, I think that this is probably happening due to the amount of content in each section, the available space on the page and the Container set to allow for Flex child elements to shrink if needed and the Container set to an Auto width:

Shared with CloudApp

After setting Container to 100% width and min-width, then containers are forced to 100% with with no shrinking going on:

Shared with CloudApp

Further I think that by adding Width 100% and min-width 100%, it was not necessary to change the Section class from Display flex to display block as long as the Container was set to 100% width/min-width.

I hope this helps :slight_smile:

.cyberdave

I see, thanks for all your help, Dave! Man, I really need to flex my Webflow neurons some more, cause a lot of these layout & sizing options can go way over my head.

At least now there’s a third solution I didn’t know about for tiny images- checking if you have your divs set to flex! Cheers!

1 Like

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