CSS: sponsors aren't appropriately sized at <800px widths about joinmastodon HOT 6 CLOSED

Has this been fixed and I forgot to tag the issue, did the browser fix its implementation, or what is the reason for closing this issue?

from joinmastodon.

Not sure -- if you changed it from multicol to flexbox, then you fixed it and forgot. At least that's what I assumed happened.

from joinmastodon.

Reopening because it looks even more broken on mobile https://imgur.com/a/TNjhKvr

Chrome 68 on an Xperia X Compact (viewport 424x625)

from joinmastodon.

from joinmastodon.

Ideally, .sponsorship .sponsors-list--badges li shouldn't have a width off 33.3%; it should be a static px or em width because the information inside the li should not be proportional. For example, Mark Atwood's url is the widest element inside the li: it requires an li width of 256px to look correct.

Also, the ul should probably justify-content to the center in order to account for the growing/shrinking of the ul width.

from joinmastodon.

Somewhat unrelated issue that is also caused by viewport width: long names in the regular Sponsors list causes the row heights to become out-of-sync.

The breakpoint for the Sponsors list (and also in general) should be at the point when it becomes possible to comfortably fit two of the longest elements side-by-side. This means that, to solve the issue with minimal styling changes,

• the Sponsors should shift from 1 to 2 columns at min-width: 522px and from 2 to 3 columns at min-width: 762px.
• the Silver Sponsors should be given fixed widths of ~256px and justify-content to the center of their flex container, since the 3-column layout only works at min-width: 777px.

from joinmastodon.