Board Thread:Darwin/@comment-5275700-20131113005820/@comment-452-20131204211652

Yatalu wrote:

I think they posted a blog about that somewhere before, how there are some wikis who already have something that changes the amount of items in one row when on bigger/smaller screens. I think LoL Wiki's "Champions" list is one such thing. Haven't figured out how to do that yet though. I doubt that that Champions list was designed specifically for Fluid, because any elements which are either inline or floated will do that. The only thing that needs to be figured out is why they are doing it the hard way, when it's a really easy thing to do.

This style is (basically) how they do it: .inlinelist li { display: inline-block; } to use it, all they need to do is this:
 * First
 * Second
 * Third

Result: First Second Third  (Obviously, they're using images instead of text, but you can see it's working.)

However, the way they actually do it is much more complicated, and I even don't know why they're using a list at all, because a row of images will naturally do that. (That is, if they're the same height - which they are in this case. If they weren't the same height, all you would need is a wrap the images in a span and specify the height of the images.)

Proof: Go to Project:Sandbox and paste this over and over in a single line:

Result:

I think whoever made that page just really really likes using templates. But this appears to be a case of using multiple nested templates and style overrides for absolutely no reason.