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).

💡 Pro tip: You can use the same method to display images, blurbs, icons or any other Divi modules side by side.

Join +2 640 subscribers!

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.
    Add two or more buttins in a Divi 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.
    Edit the Divi column settings
  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:

Horizontally center buttons in Divi

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).

Without Wrap (default)

By default, the button width will shrink if the buttons doesn’t fit in the visitors viewport.

With Wrap

Divi buttons side by side wrapping on small screens

We can make the buttons wrap instead, using the nifty CSS snippet below.

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.

Display multiple Divi buttons side by side in mobile

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.

💡 Pro tip: Just replace the snippets with display:block; to disable the row design for a specific device.

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo 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

Related posts

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo