Aligning 21 icons
Hi. Im trying to align 21 icons in a container.
Each line has 5 icons, except line 3 with 6 icons. So far the last icon always goes to a new line. How can I achieve this result and make it responsive? I was trying to play with the col-xxl number but it also doesn't work so much. I added an image of how it suppose to look.
Codepen: https://codepen.io/SoPH89/pen/yLQONbr
15 Replies
I'm no expert, but could it be easier to solve with intrinsic grid layout?
https://codepen.io/amarlong/pen/WNyaQOJ
Thank you for your reply. I see that the amount of items are the same in each line. I'm trying to have 5 in each line, except one with 6.
I think you will end up with problems when wanting to make this responsive. For the same relation to stick the responsiveness is really just about the scaling (sizing) of the icons, but that would be very weird on a mobile screen since the icons would be to small to make any sense of. Give an example of how you want it to look on a narrow screen, and then it'll be easier to help with responsiveness.
I need them to be exactly like in the image I posted, they can be smaller or with more lines once the screen is super small. The only thing that is important to keep is 4 lines of icons, and not a single icon that stands alone which is what i'm trying to overcome.
https://codepen.io/cbolson/pen/qBQZYWM is somthing like this what you are after?
Yes exactly, thank you very much. I will play with it tomorrow when I wake up 🙂 Thanks again!
It's going to be pretty complicated to make it responsive if it must follow the 5/5/6/5 layout at larger widths. The responsive problem becomes really easy though if you make the grid regular - here it is at 7x3 at normal, 3x7 at medium and 1 column at small: https://codepen.io/adamantonio/pen/JjeXBby?editors=1100
Thank you. The appaerance in wide screen should look like in the image I uploaded to the post. In small screens, it's ok if the appearance is changing a little as long as the icons are quite visible.
https://codepen.io/alanrobert/pen/MWzyPmx
I think this could solve your problem, or at least the beginning of a solution?
The minus margin probably needs tweaked, and if you can think of a better way to center than to put grid inside of flex that would be better I think. Good luck nonetheless! 🙂
https://codepen.io/alanrobert/pen/MWzyPmx
Me again, this time in a rectangle 🙂 I've updated to fit your original specs, however I don't think the image has updated.
Thank you very much. I will try this soon.
This icons thing is so frutstrating, I can't make them pixel perfect.
That's the hard thing though... an irregular grid is easy enough but then it's difficult to make that responsive. Actually, challenge accepted: https://codepen.io/adamantonio/pen/qBQZQKx?editors=1100
Oh wow, you guys are awesome! I thought that Bootstrap will help me with that task, but it's actually very limiting.
If I want to align each line according to image of my post - how can I address it? I want it to be as pixel perfect as possible, at least in the desktop resolution.
Does my suggestion not do that?
It has the six icons on the third line on desktop and doesn’t have any “breaking out” of the box. On small screens it adapts according to the available width.
I played with it, and I had some issues. I'm working now on this to make it pixel perfect. I will try to take from your codepen the responsiveness as well.
https://codepen.io/adamantonio/pen/qBQZQKx?editors=1100