Formatting a column to divide a headline from the rest of the column content

[jptsetme]

I’m building a site based on a design and am not sure if I have chosen the right elements to implement it. I’m struggling a bit with layout/formatting and could use a quick assist.

In the site design there are 4 columns at the bottom on the page with a border radius. Each of these columns has a divided section at the top with text (“The Loop | Newsletter”, “Calendar of Events”, etc.).

I implemented this using a column with a solid border and a border radius, and then added a Text and Line element at the top. This mostly looks correct.

One issue I am having is that if I turn on flexbox layout (to try to horizontally center the image in the first column), the line disappears completely

Also, the 3rd column with the podcast is drawing the line sightly further down in the column than the other columns. When I recreate it from scratch the line is in the same place as the others initially, but it later renders lower again.

My primary question is, did I choose the right element for this or is there a better one for getting the visual layout I’m looking for? If Column is the best element to use, do you have suggestions for how to get that separating line to be more manageable? (i.e. to work with the flexbox layout and to be in the same position in spite of the embedded audio control in column 3)

[tristup]

Hi @jptsetme

Thanks for reaching out.
I have checked and found that the width of the line element is set to the Auto which is the reason behind your issue. I went ahead and set it to the 100% and now it is working with the Flexbox layout. I have set it to the first column, please check and replicate it to the others.

NOTE: You are still using the older version of the theme, I would suggest you update it to the latest version to avoid any future issues.

Thanks

[jptsetme]

Thanks for your help!

[ruenel]

You are most welcome, @jptsetme.