Header row not wrapping correctly on mobile

[KMCHTX]

I am using pro header builder. My 3rd and 4th bars use content areas to display text and buttons. It works great on a larger screens, but does not function well as a responsive element using the wrap commands. I tried to apply various configurations of row/column and wrap/no wrap on the bar and the element.

I want a row display on desktop and a column display on smaller devices. How do I make it reponsive in such a way that it displays within the container?

You can see the desktop appearance I want https://meditationinhouston.org/content-draft
You can see the mobile appearance I want http://meditationinhouston.org/an-x-test

And if you look at each of those pages on their converse platform (ie mobile/desktop) you will see that the display isn’t suitable.

Can you help me get a good display on all platforms please?

[ruenel]

Hello @KMCHTX,

Thanks for writing in! Instead of just inserting the button and text directly in the container, go to Pro > Global Blocks and create a global block. With the global block, you can make use of the section and row layout options settings which you can define the number of columns to display in different screen sizes. You can insert the global block in your bar container afterward.

Hope this makes sense.

[KMCHTX]

I think I understand the suggestion. I will give it a go. In my mind, I am not sure how it will work because the buttons and text are based on a timed content plugin. I will let you know if I need additional help.
Thanks for giving me direction.
Cheers

[ruenel]

You are most welcome!