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 +3 054 subscribers!
Without Wrap (default)
By default, the button width will shrink if the buttons doesn’t fit in the visitors viewport.
To protect your buttons from being squeezed, just add the line below to the column’s Main Element:
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!
- Copy the CSS code that you have used so far
- 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
- Click the device that you want to tweak and paste the CSS in the Main Element box
- 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.
💡 Pro tip: Just replace the snippets with display:block; to disable the row design for a specific device.
That’s all for today!
👉 Related post: How to change the number of columns on mobile in Divi
👉 Free course: Create a website from scratch with Divi