I have created 3 buttons in a row with Gutenberg. On Desktop I have them all in the same row.
I can get that to look okay. The problem is that on mobile it doesn’t center the buttons (they all float to the left) and a second but separate issue is that the buttons don’t have the same width.
I’ve tried this three ways:
- made a column block and divided it into 3 columns. I put a button in each column.
- Made a Buttons block and put 3 buttons in organized as a row. I center justified the buttons block.
- Made a 2nd Buttons block and put 3 buttons in it organized as a row. I justified this as "space between".
This is the results on desktop:
I would like my final buttons row to look like row 2.
However on mobile they look like this:
On mobile I prefer it to look like Row 3. (I want it centered and not floating left)
Is there any way to justify the buttons as space between but center justify them?
The columns idea (row 1) seems to do this but doesn’t space centered on desktop (you can tell it doesn’t line up with column 2). It just seems like I shouldn’t have to do it this way.
BONUS ROUND: Is there a way to make all the buttons have the same with (at least on mobile?) It will look so much better!