Community forum for knowledge and support

Updated last year

Aligning Buttons Uniformly in Layout 339

At a glance

Anyone have any idea how I can make all of the buttons uniform i terms of alignment? I'm using layout 339

A
G
21 comments

You need to set a height of 100% on the layout339_item. Then flex(vertical) on layout339_item-text-wrapper. Then set the margin-top from the button wrapper to auto instead of the margin-medium

The margin-top auto will force the button wrapper to the bottom

thanks for this. What would be the best way to add a little bit of breathing room between the text and button group?

I also pasted the section from scratch and the icons appear above the item headline now which is different from the relume default for some reason

For extra breathing room between text and button you will need to put a margin-bottom on the text (margin-bottom margin-medium).
Before this margin was set to the button group.

Probably you've also set the flex direction to vertical on the layout339_item class, this has to remain horizontally.

Thanks I found the issue was incorrect classes from coping from relume rather than the extension, sorted now and appreciate all the help

One more question This works fine on desktop and tablet but on mobile the second are fourth items do not break and are off screen so only two items are visible now (there is no scrolling to the right)

Probably you want to change the flex container to vertical on mobile and or tablet

After changing the flex container this still wasn't fully working on mobile - I got it to work by changing the layout339_list from grid to flex, when I do this it pushes the icon above the headline, is there a way to easily have it inline like on desktop? Also is having to make all these adjustments expected, I thought these sections would be fully responsive out of the box with just design work to do?

Yes I think they should be responsive out of the box. Maybe this component has a bug why its not, not sure, would need to check the code.

I don't work at relume or anything πŸ˜„

Thanks, I will add a note to the issues so they can take a look

If you had to change from grid to flex, then maybe you could just have changed the grid

probably it had 4 cols on desktop

you could have changed to 1 on mobile

If you want to icon to on the left side of the text, like it was on desktop

you should put a flex wrapper around it

Add a reply
Sign up and join the conversation on Slack