On desktop, we have a list of logos on a page. However, when we design the mobile responsive, each logos just stack on top of each other. It becomes a very looong list. What is the best way to present these list of logos on mobile?
DESKTOP:
MOBILE:
2
-
You buttons seem to be centre bed. Set align to none and display to inline for mobile devices. Only works where icons are same size though.– Ivan VenediktovCommented Oct 6, 2016 at 12:47
-
If having them spaced out seems like a waste of space, then maybe additionally scale them down to a reasonable size? Mobile users are generally accustomed to having smaller UI elements.– Jason CemraCommented Dec 6, 2016 at 0:59
Add a comment
|
2 Answers
I must be missing something. What's wrong with allowing your icons to fill all the space they need and having one column on very small screens, 2 columns as soon as the space allows, then 3, etc, etc??
Just set your list of logo elements to display: inline-block then go to the pub, they'll align themselves from that point to fit whatever container they find themselves in.
I'd suggest visually grouping your icons in case there is a context of which they can be grouped by; if you have icons for weather then you could group them together on a row or in a box-type container. This obviously depends on what sort of icons we are talking about and how small/big the mobile device / icons are. Like these groupings, with or without a descriptive tag.
If the icons simply are 'just big enough' for a desktop, but way too big for a mobile device, then you might have to make the icons smaller when a user is using a smaller device, either by detecting the viewport or the actual size of the device.
