On Jul 10, 2012, at 7:44 AM, Brion Vibber wrote:
On Tue, Jul 10, 2012 at 10:15 AM,
<jidanni(a)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
