Streaming live at 10am (PST)

Dynamic Collection List with FlexBox Aligning Top and Bottom Boxes


#1

Im trying to align the Columns and for some reason
I cannot do it… I want to make the columns the same length.
I watch views and it works on the video but not on my Site
any ideas.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

#3

https://preview.webflow.com/preview/lebocage-lake-area-charity-horse-show?preview=d97be95ce9ea3a12bd5700e5a0d29b2a


#4

Which page and section do you specifically need help with?


#5

Its the Get Involved Link
I see in videos the software
allows Flexbox but I cannot get
flexbox to align the column boxes
to the top and bottom like the video does.
User Error I Know. Just what am I doing wrong.


#6

Hey @Michael_J_Van_Dyke, sorry for the delay in my response. It’s Saturday and I’m juggling family and work so I get on the forum when I can. The main thing that you’re missing is adding Flexbox to the collection list, this will layout all of the items. Then flexbox on the collection items (as you have already) will align the content inside the items.

Add these styles to the collection list.

Then adjust the collection items styles.

The result should look like this with each row’s height matching the largest item in that row.

Is that what you’re trying to achieve?
Hope that helps. Happy designing!


#7

Oh, I certainly understand… Family is Number One… For sure…

OK Let me see what your talking about and thank you so much…

I am a not new to webflow, but I get away from it and
use it or loose it…


#8

Exactly is what Im trying to achieve…

The Video Webflow Guy is Awesome, But he moves so
fast. Like he is has to make the video in X amount of seconds.

I spend a lot of time on Re Wind… I used Lynda.com and its the same as well, Those guys know the software so well they forget they are talking to people who know a fraction of what they know.


#9

No worries. Let me know if you need anything else.


#10

Well that worked… Not I have them Looking good top and bottom they are a little narrow. But I have no Rows anymore… LOL Its always something… Like Roxanna Roxanna Danna on Saturday Night Live. Where is that Darn Setting.


#11

Click on the image to see all the settings.

Make sure to check the “wrap children” box on the list too.


#12

Awesome.

So much control with Webflow


#13

I see No Wrap Children Box is in the List.


#14

Oh, I found it… Wrap Children Check Box…
Fixed So Thankful to you.


#15

Im so much using indesign and Photoshop… That
moving the object exactly where I want them to
go is easy… So Question Why is there so much gap
between the rows… I cannot for the sake of me find out why…


#16

When working with layout it can be helpful to turn on x-ray mode.
16

The space between the rows is cause by the bottom margin of the div block 5 element.


#17

Awesome tip

I will start using the feature

Thanks


#18

The Left Tool Bar, When I select the Plus Icon or any icon… The Tool Bar pops out.
Which is what it is designed to do… But it covers the page… The Left tool bar is not ever covering the page… Is there a way to make the left tool bar not cover the designer page. I do not see it do that in any of the instructional videos.