How to make buttons stack on mobile in Webflow?

Buttons placed side by side on desktop often need to stack vertically on smaller screens. In Webflow, this is handled through the responsive breakpoint system and flexbox — no custom code required.

Setting up the button container

Place your buttons inside a single container element — typically a Div Block. Apply a flexbox layout to this container:

1. Select the Div Block containing your buttons.
2. In the Style panel, set the display to Flex (horizontal).
3. Add a gap value for spacing between buttons (e.g., 12px or 16px).

At this point, your buttons sit in a row at the desktop breakpoint.

Switching to a vertical stack on mobile

1. Click the mobile breakpoint icon in the top toolbar (the phone icon, 478px and below).
2. With the button container still selected, change the flex direction from Horizontal to Vertical in the Style panel.

The buttons now stack top to bottom on mobile while remaining side by side on desktop.

Important: Make sure the flex direction is explicitly set to Horizontal at the base (desktop) breakpoint before switching to Vertical on mobile. If the base direction is undefined, the mobile override may cascade unexpectedly.

Styling adjustments for stacked buttons

When buttons stack, you may want to adjust their width. At the mobile breakpoint:

• Set each button to 100% width so they span the full container.

• Keep the gap you set on desktop — it applies to vertical spacing when the direction changes.

• Adjust padding on individual buttons if they feel too tall or too short on mobile.

If you want buttons to fill the full viewport width on mobile, make sure the parent container also stretches to 100% and has appropriate left/right padding on the section wrapper.

Using the grid alternative

Flexbox is the simplest approach, but CSS Grid works too:

1. Set the container display to Grid.
2. At desktop, use a two-column layout.
3. On mobile, switch to a single column.

Grid gives you more control over alignment but is slightly more setup. For most button pairs, flexbox is faster.

Common issues

Buttons don't stack: You're likely editing at the wrong breakpoint. Confirm the mobile icon is highlighted before changing the flex direction.

Stacking applies to desktop too: The flex direction was never explicitly set to Horizontal at the base breakpoint. Go back to desktop, set it to Horizontal, then re-apply Vertical on mobile.

Uneven button widths: Set each button to equal width at the desktop level (flex-grow or fixed width), then override to 100% on mobile if you want full-width stacked buttons.