Button Alignment on narrow screen

[mrutyunjaya]

Hi,

I have the following setup. Row - 2 columns - button inside each column (Please refer the attachment)

On big screen I want the buttons next to each other. Pic 1
On narrow screen I want them either one top of another with middle alignment (Pic 3) or next to each other in a contained way (Pic 4).

I have tried many combinations of alignments and flex box setting, But unable to get the correct set up. Appreciate if anyone can point it out.

Thank you,
Jay

[kory]

Howdy, @iammrutyunjaya! Thanks for writing in…we will be happy to help look into a possible solution for this; however, as always we ask that you provide us a link to your live site so that we may see what markup you’re currently working with. Any suggestions we provide will need to be relative to what you’re doing with your general page layout. There are many potential solutions for something like this, but we can give a much more tailored response once we can see the environment you’re working in. Once we have that, we’ll be happy to look into this a bit deeper.

Cheers!

[mrutyunjaya]

Hi Kory,

Would be great if you can point out how to get this done and whats the right way to do this?

Thanks ton, Jay

[ruenel]

Hello Jay,

Thanks for providing the URL of the page. Upon inspection, it turns out that you have added each of the buttons to each column and have it align left and right respectively. You will have to edit your page and instead of having two columns, use only one column. Set the text alignment in the column settings to Center so that the buttons will be aligned to the center. The buttons will also automatically display on top of each other once the screen gets smaller and smaller.

Hope this makes sense.

[mrutyunjaya]

Thanks Ruenel.

I was wondering for a while. That was easy!

[tristup]

Hi Jay,

Glad that we are able to help you.

Thanks