Arrange Elements in Column

Support
#1

Hi, sorry if this has been asked prior. I could not find this exact solution.

I would like to have a Column with Headline then below that a 2nd headline and text elements arranged in a row not a column.

I can get the 2nd Headline and Text elements to be arranged in a row via css in the Column.

I used

$el {
display:flex;
align-items: flex-start;
}

But can’t get the 1st Headline on top.

Any solutions?

#2

Hi @nealtaylor,

Thanks for reaching out.

Would you mind providing a sample URL that has this headline? If those texts are on the same container and it’s not gonna work since you’re applying flex element to element itself and not the text. And please provide a mockup design of what you’re trying to achieve, isn’t the top and bottom placement is the default ?

Thanks!

#3

Here is a mock-up as requested.

I am endeavouring to create a timeline with very basic information and no images.

Thanks!

#4

Hello There,

Thanks for providing the mockup of what you want to do. I would say that using the flex layout with your design will only lead to a more complex issue relating to the responsiveness and the other elements inside that columns.

If I were to designed that using the Pro editor, I would have one section with 7 rows. 1 row with only one column and the rest will have two custom columns (1/3 + 2/3).

For my first row, I would place the one column row as the container of the headline.

The rest of the rows will have a custom column settings having to have 1/3 + 2/3 setting. I will be placing the date headline on the left side and the text description on the right side columns.

And one last thing, I will create the vertical light with the vertical marker in an image editor like photoshop and make it as a background image for my rows so that it will mimic the timeline links between the rows and columns just like in your mock up.

Hope this make sense.

#5

That would work but this is to go into one of two columns in a row. The first column has text the second is for the timeline.

#6

Hi,

You can try these third party plugins instead.


Hope that helps

#7

Thanks - decided to go with a PNG file created in Illustrator for the moment. Have been playing with all the free time lines - so far nothing makes me happy. Thanks for the help everyone.

#8

You’re welcome! :slight_smile:

#9

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