Align text center/middle in responsive columns

[demonboy]

I’m creating a global block that will display either on a full-width page or in a sidebar. It’s a list of benefits where each should appear on a separate line. Each line is made up of three columns, where column 1 is an icon, column 2 is a heading, and column 3 is a paragraph of text.

I’d like to set this up so that each column is responsive, and where most of the row space is given to column 3. Should I be avoiding physical widths given to each column (so avoid making column 1 20% width)? Or is that actually part of the answer?

More importantly I’d like each row to center aligned and vertically aligned in the middle.

How best to set this up?

Thanks in advance.

[christian]

Hey @demonboy,

It looks like you’re using the new Row so you’re on the right track.

Regarding the responsive columns, yes, you should not give a column a fixed unit like px. For simplicity, it’s best to use the Row’s layout option.

To vertically center columns in a Row, you need to select Center under the Row’s Align Vertical option.

The key to understanding the new Row options is learning Flexbox. See https://theme.co/apex/forum/t/using-flexbox/24851

Here’s a quick recreation of the setup.

Hope that helps.

[demonboy]

Thanks for the reply. That all makes sense except one major issue: I don’t see that set-up option when I select my column within the row. I have Design Setup only. There is no Flexbox option.

I’m sure this is something really obvious but I’ve followed your quick video and it’s exactly the same as yours. One thing I have noticed is that in your video your ‘customise’ is active (grey background). I can’t click on customise to make it active. Not sure if that has anything to do with it.

[christian]

Hey @demonboy,

Looks like you’ve disabled Advanced Mode. Click on the Gear Icon above the Save button.

Then, enable Advanced Mode under Preferences tab then click the Save button.

Hope that helps.

[demonboy]

Nah, I reckon you logged into my website and disabled ‘advance mode’

Thanks for that, I’ll start working my way through it. Appreciate your time, thank you.

[rad]

You’re most welcome!