Better presentation of social icons in footer

[AngeloStavrow]

Is your feature request related to a problem? Please describe. Currently, the theme includes fourteen social network icons — thanks to the contributors that added their favourite networks! However, the footer layout was originally laid out to accommodate the original eleven, and the <div id="social-icons> is getting pretty crowded on desktop — and looks terrible on smaller mobile screens (see screenshot below).

I chose a minimum icon size of 24px by 24px to ensure that they're tappable on a 320px-wide mobile screen, and a maximum width of 414px on the desktop (as I recall, that's also the width of an iPhone 8 Plus).

Describe the solution you'd like Any suggestions are welcome! Ideally I'd like to keep this theme written in pure HTML and CSS, at least for layout purposes. It's an easy enough fix on desktop-class screens—widen the div to maintain a pleasant, balanced layout. I'm not sure how to best approach this on mobile, though. Two rows of icons might work.

Describe alternatives you've considered

• Recommend users only choose their 11 favourite social networks, and don't change anything.
• Update the div width on desktop and hide social icons into a collapsible menu on mobile.
• Same as above, but just layout icons on two rows or something for mobile, as I generally don't feel great about the discoverability of collapsing UIs.

Additional context Here's an example of weird overflow we get on a 320pt-wide mobile screen:

[dpflug]

What about using justify-content: center; or maybe display: grid; so the wrapping looks more natural?

[AngeloStavrow]

Yeah, that's a good idea. I agree that it just doesn't look natural.

I wonder, what do people think about spreading the content over two rows on mobile screens?

[RyanSquared]

I'd prefer having something usable than shrinking down icons to the point of uselessness for the sake of keeping it on one line. I wonder if there's a way to dynamically size to fit up to a certain threshold, at which point it could wrap around to another line?

[dpflug]

Two more suggestions I got:

1. Categorize the icons in some way, and stick them under mini-headings.
2. "Unbox" the icons for Facebook, LinkedIn, and Flickr, then use space-between and flex-wrap.

[RyanSquared]

and Flickr

Bit hard, given it's just two dots in a box.

[AngeloStavrow]

The social icons are taken from FontAwesome — there may be "unboxed" variants that can be used instead, for consistency.