Trouble vertically aligning content, evenly, in a column

Hi there, see:

Scroll down to the section under the header, I have lottie animations, all the same size, but as the screen gets smaller, the content gets unevenly spaced…I have “space evenly” in the flex box of the column…

Any help would be appreciated.

Thanks.

Hi @logoglo,

Thanks for reaching out.
I have checked the section you mentioned here but didn’t find the irregularities in the spaces. It would be good if you can provide a screenshot marked with the issue and if possible mention the screen size where we can find that problem. It helps us to replicate the issue at our end.

Thanks

Sure, see below:

Hello @logoglo,

Thanks for the updates. This issue is because your Flexbox alignment is to the center. You will need to align the contents to the “Start” vertically so that the headlines will always be aligned as long as the height of the icons are the same.

Best Regards.

Thanks, so I now have the icons in a div, so they are the same size…I set it to start, but as each column of text is of a different length, the buttons at the bottom dont align.

I tried setting the flex box to space evenly, but that doesnt work either.

Throw them in a Div as well, or adjust the applicable margin to auto to ensure they all get pushed the bottom of their container.

Hey @dabigcheeze,

Thanks for chiming in and sharing your ideas, we really appreciate it.

Cheers!

Thanks, but I don’t really want to put it into digs too, the issue is still there…using flex box, how do I solve it?

Hello @logoglo,

In each column, click the Button element and then set top margin to auto so that the Button element will automatically sets at the bottom of the column.

This setting should make all the buttons align together.

Kindly let us know how it goes.

That did the rick, thank you as always!

Hi @logoglo,

Glad that we are able to help you.

Thanks

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