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
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%.
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.
