Make buttons line up

[hypnorich]

I would ideally like the buttons to all line up. I have created each therapy as individual global blocks. If you have any suggestions about how I could achieve my goal I’d love to hear your ideas

[friech]

Hi Richard,

Thank you for writing in, one way of aligning those buttons properly is to position them at the bottom of the column, to do that, please turn on the Flexbox Layout of your Columns. You can keep the Horizontal and Vertical align to start or center depends on your design.

Then to push the button element at the bottom of the column, apply an auto top margin to it.

Hope it helps,
Cheers!

[hypnorich]

Thanks for your reply. I don’t see the flexbox option though. I have looked at other people’s support tickets and I am guessing that it is down to the fact that I am working on x theme rather than pro and because I’m not working in headers or footers menus that I can’t see the option. Is that right?

[marc_a]

Hi @hypnorich,

You need to enable the Advance Mode in order for you to see the other elements, to know more about Advance mode please check our docs.

Hope that helps.

Thank you.

[hypnorich]

Advanced mode is already enabled. The settings for flexbox are still not visible

[marc_a]

Hi @hypnorich,

The settings for the flexbox can be found in your columns.

Hope that helps.

Thank you.

[hypnorich]

Awesome…I am 95% there. With your help I have found the flexbox area in columns but I don’t have a margin section I can put “auto” in… I only have the padding area. Have I missed a small detail?

[marc_a]

Hi @hypnorich,

To locate the margin section of the button please follow my screenshots below.

Then press design

Hope that helps.

Thank you.

[hypnorich]

Thanks VERY much for your help. I think I have it all sorted now. You’re a super star! Thanks for your patience with me

[hypnorich]

Seems I spoke too soon. It looks like I have everything set up like you said but when I create a global block using the technique and then put several of these global blocks side by side in a row they don’t line up. I have managed to create the effect on a standard page column but the global block part still eludes me

[marc_a]

Hi @hypnorich,

To better help with your concern, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password
• Global Block Name

You can find the Secure Note button at the bottom of your posts.

Thank you.

[hypnorich]

Thanks for your help. The info is attached

[nabeel]

Hey Richard,

Thank you for providing the credentials. I checked your setup and the way you’re setting up the global blocks, it would be very hard to align the individual global blocks added on a page (unless in every Global Block, you have the content that has same structure and same number of characters), the Flexbox settings won’t work this way. I’d recommend you to create the content directly instead of using the Global Block if you want them to align. By doing this Flexbox settings will come into play and you can align it very easily.

I’ve a created a test page for you so you can see what I mean, you can replicate that on your pages (see secure note)

Hope this helps!

[hypnorich]

I appreciate you taking the time to advise and to create the test page to show me what is possible. I have ditched the idea of getting the look that I want using global blocks and have instead saved all my global blocks as templates so I can more easily add them as elements within a page. I just did a test setup on my homepage and I felt like I had matched up every element of my site with the advice you gave and tried to cross reference my homepage test with the demo content that you created but I have still missed something as the buttons are not moving to the bottom of the row.
Would you take one last look at my homepage and tell me what I have missed so I can hopefully learn the final piece of the jigsaw and be able to stop stressing about this??

Thanks SO much

[rad]

Hi Richard,

For that, please inspect the row where the 4 column are, and change it’s flex vertical alignment to stretch.

It should automatically align the items from top to the bottom, given that the columns has its own flex alignment setup too.

Thanks!