How to create Responsive Buttons in Flatsome Theme

Want to align buttons perfectly in Flatsome? This quick guide shows you how to position two buttons side by side on desktop, and stack them vertically on mobile for a clean, responsive look. Let’s get started!

Steps to Align Buttons with the Stack Element

1. Add Two Buttons in UX Builder

Open your page in UX Builder.
Place two buttons next to each other in the workspace. This layout is great for desktops but may need adjustments for mobile.

2. Use the Stack Element for Better Responsiveness

Click the plus icon (+) in UX Builder.
Search for Stack Element and add it to your layout.
Drag your button elements into this Stack Element.

3. Adjust Button Spacing

Once the buttons are inside the Stack Element, set the spacing to 0.5 or whatever spacing looks best.
This will make sure they’re close but not touching.

4. Center Align the Buttons

With both buttons selected in the Stack Element, set their alignment to center.
This keeps the layout neat and visually centered on the page.

5. Configure the Mobile Layout

In the Stack Element settings, adjust the layout direction for mobile to vertical. This will stack the buttons one on top of the other when viewed on mobile.
This is essential for mobile users, ensuring the buttons are easy to access and look clean on smaller screens.

6. Optional: Adjust Button Width for Mobile

If you want the buttons smaller on mobile, place the Stack Element inside a new row and column.
Resize the column width as needed (e.g., 10 or 11) to make the buttons narrower.

And that’s it! Now your buttons are aligned side-by-side on desktop, and vertically on mobile with a responsive, user-friendly layout.

Hey there! In this quick guide, I’ll show you how to align two buttons side by side using the UX Builder in the Flatsome theme, and how to make sure they display nicely on mobile devices. It’s a super easy process, especially with the Stack element, which is more intuitive than using rows and columns.

Let’s jump in!

Steps to Align Two Buttons Using the Stack Element

Open UX Builder
Start by opening the UX Builder for the page you’re working on.
Place the Buttons
Add two button elements next to each other. This part is straightforward and works perfectly on desktop.
Add the Stack Element
Now, click the + icon to add a new element.
In the search bar, type “Stack” and select the Stack element from the list.
This will allow you to arrange elements inside it with better control.
Move the Buttons Inside the Stack Element
Drag and drop your two buttons into the Stack element.
Add Spacing Between the Buttons
Once your buttons are in the Stack element, you’ll notice they might be too close together.
To fix this, add some spacing (around 0.5 should do the trick). This will create a nice gap between the buttons.
Center the Buttons
After adding spacing, make sure to align the buttons in the center. This will ensure they’re nicely positioned on larger screens like desktops.

Adjusting the Layout for Mobile and Tablet

Now, let’s ensure the buttons display well on mobile and tablet screens.

Change Button Layout for Mobile
In the Stack element settings (on the left side), look for the option to set the direction to vertical.
This change will make the buttons stack on top of each other when viewed on mobile devices.
Responsive Settings
UX Builder will show a little green dot next to elements that have different settings for responsive layouts.
This helps you track what’s been customized for mobile, tablet, or desktop.

Optional: Making Buttons Smaller on Mobile

If you want to make the buttons smaller on mobile:

Add a Row and Column
Add a Row with a Column element.
Move the Stack element (with your buttons) into this column.
Adjust the Column Width
Click on the column, and you can adjust its width to make the buttons smaller.
Try setting it to 10 or 11, and see what works best for your layout.