Alignment of Shortcode Based Buttons

[KMCHTX]

I am working on a header that includes 6 buttons, possibly more. The buttons will display according to a schedule. Our hope is that the display will have the appearance of Option 1 on this page.

The display is uniform, and flexible. When the schedule changes, the buttons appear cleanly and correctly.

Can you tell me which option do you recommend I use?
Option 1 is based on legacy shortcodes which I am told not to use. Global blocks are prefered.
Option 2 is global blocks in raw content.
Option 3 is global blocks in a grid.**

Before you answer, can you also consider that each has some display problems.

The problems I face are:
Option 1 does not have vertical space when the viewport is reduced enough to cause the buttons to wrap to a second line.
Option 2there are issues with global blocks display. They don’t always appear as buttons! Also, they won’t sit side by side.
Option 3I tried to create a grid that would allow the buttons to re-align when one button is not displaying, but I couldn’t get them to 1) appear as buttons or 2) align correctly.

How do I get them to display with the desired vertical and horizontal space?

You can read more about the design of each section on the page. Feel free to access the page to look at the back end. I tried to label each element so you can easily work with the setup.

[KMCHTX]

For option 3, is there a way to have dynamic columns that adjust to the size of the content (ie buttons). So, if no button is appearing, the column would have a minimal size. Just a thought. I am not fully familiar with the flexbox features.

Cheers

[ruenel]

Hello @KMCHTX,

Thanks for writing in!

Regretfully what you have in mind is not possible. You cannot align shortcodes in an inline manner simply because only the grid cell or a column can display flex items. The content area or the raw element does not have a flexbox layout. It will only be possible if you wrap your shortcode with custom HTML and some custom CSS flex styling which by the way is beyond the scope of our support.

Your shortcode:

[timed-content-rule id="15197"][cs_gb id=15581][/timed-content-rule][timed-content-rule id="15197"][cs_gb id=15582][/timed-content-rule][timed-content-rule id="15196"][cs_gb id=15583][/timed-content-rule][timed-content-rule id="15197"][cs_gb id=15584][/timed-content-rule][timed-content-rule id="15197"][cs_gb id=15647][cs_gb id=15586][/timed-content-rule]

They will always display on top of each. You will have to wrap the global block inside a cell. Please check out my example page.

Hope this helps.

[KMCHTX]

@ruenel Thank you so much. I looked at the example page. Option 1, with the button class modifier gives me the result I want.

I was hesitant to use it because I have always been encouraged to use global blocks. But, it works and is the only option, so I am grateful.

Thank you again.

[ruenel]

You’re welcome @KMCHTX!
It’s good to know that it has worked for you.