On Jul 10, 2012, at 7:44 AM, Brion Vibber wrote:
On Tue, Jul 10, 2012 at 10:15 AM, jidanni@jidanni.org wrote:
Just hit many CTRL++ in Firefox 15.
re: http://en.wikipedia.org/wiki/Language_family#See_also
This is an example of poor, non-scalable layout by wiki authors -- the kind of thing that often messes up mobile view, but can happen on the regular desktop view as well depending on your window size. Nothing ill-intentioned in the code, but as your window gets smaller relative to the text size it gets less and less tenable to lay out a floated table next to a two-column list.
There are a couple things that can be fixed here:
- drop the floated table entirely, show it inline
- drop the multi-column on the list
- or -- drop the above for smaller screens, while keeping them for larger
screens (with CSS media queries)
CSS media queries can't be done with inline styles, so that needs to probably switch to a class that can be defined in the global styles. (Alternatively, we could devise an extension to let you add <style> sections from templates, which might help since templates are being used here to add the inline styles.)
-- brion
When using column-count it does indeed seem attractive to try to change the column-count based on the screen width. However there is a (imho, better) solution for this.
Use column-width instead of column-count. column-width is basically a responsive version of column-count. That adds and removes columns dynamically. And with an added bonus feature that it respects the current parent element dimensions rather than the entire window, which is pretty much always what you want.
Check the paragraph example on {{column-width}} at Wikipedia for an example:
https://en.wikipedia.org/wiki/Template:Column-width
-- Krinkle