enter image description here

wraps to this on narrow screens:

enter image description here

What comes to my mind is wrapping like this: 2x 2x 1x (and the 1x placed in the middle of the third row)

Any ideas?

  • 1
    you could simply use media queries and make the font or padding smaller. But Alvaro's answer is a way better approach, for any screen (you can use vertical separators on wide screens)
    – Devin
    Dec 28, 2016 at 23:58
  • Yes, this is probably the best solution -> mq.
    – Legends
    Dec 29, 2016 at 0:17

1 Answer 1

  • Group related buttons together
  • Leave some space between rows so the group relation is understood

enter image description here

(Although without context, in my opinion the phrasing doesn't look very clear and the amount of buttons seems a bit overwhelming).

  • Context: Buttons are below a graph which control the graph data displayed in the canvas. But does this look appealing? Yes I can use mq, but the question is rather how to adapt it to look nice. This does not look nice to me. But thanks for the suggestion.
    – Legends
    Dec 29, 2016 at 0:13
  • If you could upload the whole screen maybe it'll be easier to suggest a better solution.
    – Alvaro
    Dec 29, 2016 at 0:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.