How to force vertical alignment of buttons in a column

[amardeepmisha]

Hi,

I have a number of buttons (displayed as text) in a column of a row. I would like them to be always in vertical order (e.g. flex-direction: column) no matter how wide the column is. Currently (i.e. by default) the buttons are laid out in row order if the column is sufficiently wide. But if due to responsive layout the column becomes narrow then the buttons are laid out in column order.

How can I force them to always be in vertical order.

This is how they are currently,

This is how I would like them to be,

Thanks.

[rad]

Hi Misha,

Thanks for reaching out.

The flex alignment will not work on text, it’s only applicable for multiple elements, example, it’s supposed to align the graphic and text feature of the button. But if you’re referring to the flex styling of the column where the buttons are then it’s not possible. The alignment will only work on standard text and not on buttons. The workaround is adding your buttons through global block and have each button into their respective row. Then simply add that global block as single element to your page column.

Please check this https://theme.co/apex/forum/t/global-blocks/24723

Thanks!

[amardeepmisha]

Thanks, @Rad.

[ruenel]

You’re welcome!
We’re glad @Rad were able to help you out.