Understanding Headline Flex Box

[kgpthemex]

Hi Everyone!

So I’m currently working with the X theme and I can’t seem to understand how to take advantage of the flex layout feature using the headline element. I’m familiar with flex box since I have had the pleasure of working with Pro, and I love it. However, from my working knowledge in Pro, I remember that the flex rule was applied to the parent (container) element.

If so, how does one use flex in this situation? For instance, I was thinking of adding three features under a main heading, using the span tag. The idea is to columnize them with flex so that they all end up in one row. But each headline element has its own flex feature. I’m really not getting it. Am I supposed to add the three feature words into one headline element?

Any guidance is appreciated!

Thank you!

[paul.r]

Hi,

The Flex settings in the Headline Element is only for the Icon and content layout.

You can use the text element instead, then manually create your layout using classes and custom css

For example add this in a text element as content.

<div class="parent-flex">
       <div class="child flex">Headline 1</div>
       <div class="child flex">Headline 2</div>
        <div class="child flex">Headline 3</div>

</div>

Then add this in Theme Options >CSS

.parent-flex {
   display:flex;
   flex-direction:row;  
}

To know more about flex kindly refer to the link below

A Complete Guide to Flexbox | CSS-Tricks

Thanks

[kgpthemex]

Thanks @paul.r

That makes sense.

I also appreciate you for directing me to the element through which I could achieve this. Thank you also for the resource.

I would suggest that you guys put a tooltip or some help icon that tells users that this feature is to be used with the icon…unless I missed it.

Thanks again!

[thai]

Thanks for your suggestions