Flex layout button alignment on mobile

Support
#1

The buttons display stacked in a column as desired on the desktop version of https://kindfulhospice.com/locations/

The buttons are set to row for flex layout. What is needed to make them appear on mobile as they do on desktop?

Your assistance is greatly appreciated! Thank you.

#2

Hi @WaggingLabs,

Thanks for reaching out.

Please add this CSS to the Row’s Element CSS (not on section or column).

$el > .x-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}
$el > .x-column > .x-anchor-button {
   max-width: 150px;
}

It’s the row where those 3 columns are added. Columns have no flex styling so it has to be applied like this.

Thanks!

1 Like
#3

This is great, thanks very much!

#4

You’re more than welcome, glad we could help.

Cheers!

#5

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