Collection image in flexbox not expanding to 100% width

I’ve done a bunch of research on these forums and can’t seem to find a solution to troubleshoot my issue. Any suggestions or help are much appreciated!

I set up a blog page showcasing recent posts using this guidance about Flexbox.

It looks great in the editor. The blog thumbnail comes through at full width in the column. The height of all three posts in the row are equal. The text and by lines stretch fully to 100% width. Everything looks perfect. But when I publish, the image (and seemingly only the image) doesn’t go full-width.

I’ve tried tweaking width % (Width, MinW, MaxW) at the item, image, list, etc. levels but nothing seems to fix the problem. There is also a link block behind the image, heading, and summary that I’ve played with width on. Still nothing fixes it.

Any suggestions here? The site is live. You can see it at . Here’s a comparison of what I see:

This is how the layout in each collection item should look on the published end (minus the collection item box); it shows it has 10px of padding on each dimension. All content should extend to that edge.

image

Here is my site (live) Read-Only: https://jumpto365.com/blog
Here is the read-only link: read only link

Read-only link will be really helpful for anyone attempting to help with this.

Sorry about that! New to the forums and that functionality. Here is the read only link. I updated the original post with this link as well.

Should be able to use a similar strategy with the other elements too.

@jackwabbit thanks so much for the insanely quick reply and the video overview.

You got me almost all the way there and you did it in a friendly and geniune way. Thanks so much.

It turned out I had two knobs I had to turn. The image needed to be at 100%. But so did the link block. I made the image updates on the blog page I referenced above. Worked great.

But I have the same layout/solution on the home page (in two places). When I did that there, it threw things out of whack. This screenshot is from the home page, before I figured out the fix.


This is the same thing I saw earlier when I was getting frustrated and came to the forums. I thought I had played with every permutation of widths, but I guess the one thing I hadn’t done was set both link block and image to 100% widths (neither on Auto). I checked with a couple browsers and this seems to have fixed my issue fully.

image
I really appreciate the help, Jack!

1 Like

That’s awesome! Glad it’s working now :grin: :+1:

@jackwabbit, not to take advantage of you, but perhaps you know what’s going on with this minor issue as well. I’ve noticed after I’ve gotten things lined up correctly, sometimes the third post in the first row wraps to the next line (and it’s always the third post in the first row). I use a Mac and this has happened on Chrome, Safari, and Edge. Currently it’s only showing up for me on Safari, but I’ve seen it in the others. Do you have any ideas as to why this is happening? Obviously it’s not the end of the world (and it’s not as bad as the original problem I had), but for the life of me I can’t figure out why just this one is the problem.


Here’s the link to the page in question: https://jumpto365.com/blog
Here’s the link to the read only version of the site: https://preview.webflow.com/preview/jumpto365?utm_medium=preview_link&utm_source=designer&utm_content=jumpto365&preview=39a9b78e6e6edd333319a3f2373344aa&mode=preview

Here’s a video from @Brando I found on another thread talking about a similar issue: https://cl.ly/3f265f113e0b

It’s not working exactly like that with your site, but similarly, just set the basis to 33% like in this video and it looks like that fixes it:

Yep, that did it. Thank you so much once again.

Slightly annoying considering the Webflow Unviersity video specifically shows the “you can use math to get exact sizes 100/3 for example” and that’s what is causing the issue.

1 Like