I'm looking for ideas for how to rework this page in mobile and desktop to make information easier to read.

I'm currently using bootstrap cards inside card columns.

enter image description here

enter image description here

enter image description here

  • 2
    Hello Bob and welcome to the forum! This question will probably be closed as too broad since there are a lot of usability issues going on. Could you modify the question to target a more specific problem? i.e. How to show individual item status across massive amounts of data?
    – DaveAlger
    Dec 6, 2019 at 21:18
  • 3
    You can open a different question for each specific UX problem you have
    – DaveAlger
    Dec 6, 2019 at 21:20

2 Answers 2


Well as you might notice with this specific issue, there is no enough space to show all desirable values within provided screen. So as making them prioritized, you should also consider displaying a visually consistent interface. To achieve this beyond having a simple look, you'd better not to use any gradient color other than pointing out an action within that frame. There's not just a single issue but, to be able to describe simply what you can do with this interface;

  • Get rid of the gradient or any colors than simple look,
  • Align all hamburger menu icons to right,
  • Use the same text blocks everywhere to being able to fulfill robustness,
  • Make "search, filter, and sorting" feature into more appealing like put them all along below above the screen.

Here is a basic view of mobile interface you can apply to your case;


download bmml source – Wireframes created with Balsamiq Mockups

After providing data consistency through all your app, you may simply choose to give these "not first degree" informations additionally as a (onclick, hover whatever you desired) feature.

And as a Desktop solution, since you choose to use Bootstrap's card component, you should use the rest of the data within its summary section which I recommended to hide with mobile.


the gradients..yeah, keep solid colors instead. for the equipment screen, those blocks need padding inside and force the text after the 3 bars to flow into the next line, that 'cat' coming in at the end and then continuing onto the next line is a little bit messy. perhaps the font sizes on the desktop can be bumped up?

i also think it would be good to make a few rules to each element on the phone in terms of alignment, spacing and padding, looks a little haywire but a few more iterations and you should be good to go!

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