Flex layout inconsistent on mobile

I need help fixing the mobile appearance of buttons displayed on https://kindfulhospice.com/locations/

The flex column renders as desired on desktop, but on mobile they squeeze together as shown in the screenshot.

Buttons are currently set to row layout.

What would be the correct way to layout these elements to achieve the desired outcome?

Thank you!

Hi There,

Thank you for writing in! First off, please copy that entire Page > CSS and check it here, resolve the error that its found, its a missing closing bracket error.

After you corrected that error, add this to that Page > CSS

#location .x-column.x-sm {
	display: flex;
	flex-direction: column;
}

Then, you’ll need to set your button’s left and right margin to auto to center it.

Hope it helps,
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.