Forum Academy Marketplace Showcase Pricing Features

How to align 3 buttons on the same line on mobile?

I’ve watched the 2 hour video on mobile responsiveness, and I still don’t get it (I think I’m too dumb for this). Always had to tinker around with the values by trial and error to get something that works.

Now I can’t seem to get the 3 buttons aligned on the same line on mobile. Any hint? Thanks!!

Desktop:

  • 2 groups (left & right) of equal width
  • 2 buttons on left, 1 on right
  • the buttons are fixed width (100px), the groups are not

Mobile:

  • all 3 buttons should be on the same line but i can’t get them to

Desktop:

Mobile:

Hi @jayy,

Here’s a trick I’ve figured out for this - it helps to have a variable-width group between them. Here’s how I’ve been able to make this work in the past from trial and error:

  • Group A = the parent group
    – Contains Group B, Group C, Button 3

  • Group B = The teal group
    – Contains buttons 1 & 2, all buttons are fixed width.
    – Is fixed
    – Has extra space in it in case the buttons get too close, but since your buttons are only 100 pixels each they shouldn’t crash on mobile.

  • Group C = the red group
    –Doesn’t contain anything, is just there to span between the buttons.
    – Is variable
    – Has a minimum width of 0%.

Here’s how all of those fixed/variable settings look together:

Result:

When you size it down it will shrink until the red disappears. It will push button 3 to the next row if that happens, but seems unlikely in this case unless the mobile screen is very small.

Hope this helps, and best of luck with your app!

Adam

1 Like

@AdamT wow you’re awesome. thanks so much for that!! I’ll try it.

Nice, also wouldn’t get down on yourself with responsiveness, it is just tough for me too - I would hazard to guess it is difficult for many people.

2 Likes

@AdamT thanks for the encourgement!! much needed and appreciated :slight_smile: