Forcing div's width to 120px

Shouldn't the width of each row be forced to 120px? (12px x 10 images) This prevents the tables from collapsing and breaking on smaller screens, like they do now.

All that would be required is to replace the <div> with <div style="width:120px;"> (or maybe min-width). Same could be done for the other types of rows, with different width values of course. Alternatively, replace it with <div style="display:flex;> which doesn't need a custom width, it'll just not allow the images to break into multiple lines. --RanAS 05:01, 7 September 2016 (PDT)

Go ahead (the templates aren't protected afaik). This shouldn't break anything. In case you go with 120px, also test if it works with browser zooms other than 100%. Since you seem to know some CSS stuff: I expanded the SRS and Playing forever pages and now they load very slow (with load I don't mean how many kilobytes must be downloaded; I rather mean the time until the pages show up after I click the link; that's about 10 secs on my computer). Is there any way to speed up the pfrow template? I tried to use [[File:{{{1}}}Tet.png]] instead of [[File:{{{1}}}Tet.png|12px|{{{1}}}]] for {{mrow5}} but that doesn't seem to have helped at all. -- eRR0R 10:23, 7 September 2016 (PDT)

Oh, well. I'll update it soon then. About the images, by default adding a whole lot of images makes the browser load slowly. However, there seems to be another problem here. This wiki automatically converts small images to base64 encoding, so instead of loading every image once in that page and rendering the same image multiple times, it has to load and parse every single instance of the same image separately. That can't be good in a page that uses that many images. It's not the template, it's a problem with the wiki itself. I dunno if it's possible to fix it unless you have access to the wiki's settings, since it must be some MediaWiki filter of some kind. Here's how the HTML for the image should turn up ideally:

<a href="/wiki/File:OTet.png" class="image"><img alt="Tet.png" src="/w/images/2/20/OTet.png" /></a>

And here's how it gets rendered as currently:

<a href="/wiki/File:OTet.png" class="image"><img alt="Tet.png" src="data:image/webp;base64,UklGRi4AAABXRUJQVlA4TCEAAAAvC8ACAA/wCPdHuD/Cff7jAUQCJJiM/l9LdUJE/8PZJwAA" data-pagespeed-url-hash="3424164771" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"/></a>

To make it even worse, there's also some JavaScript enabled as well. Seems like it would help with image loading in theory, but honestly I doubt it does that in practice. --RanAS 06:21, 8 September 2016 (PDT)

Thanks for your answer. I forwarded your CSS fix suggestions to Blink. Also your edit seems to have worked, didn't see any broken playfield tables in the browsers I am using. -- eRR0R 10:54, 8 September 2016 (PDT)