Cards not respnding to vertical stretch on flex?

Hello,

Not sure what I am missing. Watched the videos on flexbox and no go. The items are not stretching length-wise completely. What am I missing?

https://preview.webflow.com/preview/new-zocalo?utm_medium=preview_link&utm_source=designer&utm_content=new-zocalo&preview=31fc5dc90baaf98abeeca52ee87f3bf9&workflow=preview

Thanks

Hey Chris,

I took a look—seems like you’re working away (when I opened it again, it was completely different)—but it appears that you have too many CSS rules, hence the difficulty in troubleshooting.

First off, add a container element (not display: flex… yet). Second, you can set the Collection List to display grid, instead of adding in multiple collection lists. Third, you can add the vendor card in and link to CMS values; it will auto-populate the grid.

For .vendor-card class, remove everything except display: flex; justify: space-between; and height: 100%.

Control the width of the elements from grid settings alone: three 1fr columns should be great and responsive (reduce column number at smaller screen sizes).

I’d also style the button element, rather than a wrapper around a link block with a text element inside.

In about a minute, I threw this together (obviously would need more styling, depending on your design):


(FYI the images are using object-fit, that’s just my preference).

Let me know if any of this helps — or if it’s confusing!
Colin

Yep it does not seem to be working.

I followed this video

I hit top margin to auto and it is not working. I’m missing something but just cant see it.

https://new-zocalo.webflow.io/

https://preview.webflow.com/preview/new-zocalo?utm_medium=preview_link&utm_source=designer&utm_content=new-zocalo&preview=31fc5dc90baaf98abeeca52ee87f3bf9&workflow=preview

Hi, @ColinSimmons thank you very much for the response.

“Second, you can set the Collection List to display grid.”
I set up the grid this way because I have this element

When I turned the cms collection into the grid, it would not let me add a div, not part of that collection.
It was important to have that div take up 2 grid spaces "the client really did not like the empty space.

Make the grid and adding individual collection items was the workaround for that problem.

And for the button, I don’t know else how to design it to make that specific “hover effect” of an item hovering over and then “landing”
If you hover over the buttons on the site so far that has a cool effect. is there another way to recreate that?

I will give everything else you recommend a shot and see if I can get it to work.

Thank you

So I copy and pasted that particular section. I started over again and for the most part, I’m getting good responsiveness, however, these card buttons are not going auto to the bottom.

is this because it is a link block in a div?

@ColinSimmons
Made everything look like yours


https://preview.webflow.com/preview/new-zocalo?utm_medium=preview_link&utm_source=designer&utm_content=new-zocalo&preview=31fc5dc90baaf98abeeca52ee87f3bf9&workflow=preview

Why is anytime arepa still acting like that?

Figured it out. The button will not align if it is wrapped in a div. You have to have buttons not wrapped in divs.

Thank you for your help @ColinSimmons