Display Two (Or More) Buttons Side By Side In Divi

Displaying two buttons side by side in desktop, tablet and mobile devices is common in modern web design. Here’s how you can display two – or more – buttons in the same row in a nice responsive way using flexbox. 

We will also have a look at how to change spacing between buttons, making them center aligned and wrapping buttons (if needed).

Displaying Multiple Divi Buttons Side By Side, Step By Step

There is no responsive option in the Divi Builder to display multiple buttons side by side in all devices. Here’s how to fix it with a couple of CSS snippets.

1. Insert two or more Divi Button Modules in the same column in a row.
   
2. Edit the row settings by clicking the cogwheel and then click the cogwheel to edit the column settings where the buttons are added.
   
3. In the column settings, go to Advanced » Custom CSS and add the snippet below in the Main Element:

   display:flex;
   column-gap:20px;

   

That’s it! Just change the value for the CSS property column-gap to increase or decrease the spacing between the buttons. Save and preview in frontend.

The settings will be inherited to the tablet and phone layout automatically (but we can change this, as I will show you later in this tutorial).

Center Aligning Buttons Horizontally In Divi

By default, the buttons will be left aligned. To center them you can just add one more line of CSS to the column Main Element:

justify-content:center;

That’s it! Now, the buttons are centered side buy side in all devices:

To have the buttons right aligned instead, just replace the line above with this one:

justify-content:flex-end;

That’s it! Don’t forget to save your settings.

To Wrap Or Not To Wrap Buttons?

So what happens if your buttons are too big to fit side by side on small screens, for example in mobile devices? Don’t worry, the code is responsive but you can choose if you want the buttons to be scaled (aka squeezed) or if they should wrap (aka stack).

With Wrap

To protect your buttons from being squeezed, just add the line below to the column’s Main Element:

flex-wrap:wrap;

Save your settings and preview in frontend.

Use Different Settings For Different Devices

What if you want to have a bigger gap between the buttons in phones only (fingers tend to be bigger then mouse pointers)? Or if you want the buttons to be left aligned on desktop and tablet but center aligned on phones? This is where the Divi Responsive design settings comes in handy!

1. Copy the CSS code that you have used so far
2. Hover the  Main Element heading (we are still in the column settings under Advanced » Custom CSS) to display the three device icons for desktop, tablet and phone
3. Click the device that you want to tweak and paste the CSS in the Main Element box
4. Now, you can change the values for that device.

If you change the tablet CSS, it will be inherited to phones automatically. If you want to override the tablet CSS, just paste the snippets in the phone tab and make your changes.

That’s all for today!

I hope that you enjoyed this post. Subscribe to VictorDuse.com on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: How to change the number of columns on mobile in Divi

👉 Free course: Create a website from scratch with Divi