I have the following button layout on my web app and it looks fine on larger screens.. enter image description here

On portrait iPad or smaller it looks like this.. enter image description here

I'm not sure what the best way to display, hide/show these would be? Smaller icons, hamburger menu, stack vertically on a grid?

All suggestions appreciated!

  • 1
    Could please describe a bit more on what your application is doing? Are all the buttons equally important for your user? Jun 19, 2017 at 13:21
  • This page is a client profile on a client management app, the edit button has highest importance as it contains multiple actions, same with the tag button. all others couple probably be grouped together in some way
    – J Foley
    Jun 19, 2017 at 13:25

1 Answer 1


I think you could just let them wrap, like they are in your screenshot, albeit with some margin added between the rows.

If some are used less frequently than others, and if there is a logical way to group and label those options in dropdowns, that's probably a good way to simplify things. But don't necessarily do that just for smaller screens - if it makes sense to group things on smaller screens, it might make sense to group them on larger screens too.

This question is a prime candidate for card sorting or other usability testing if you are able.

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.