On Jul 10, 2012, at 7:44 AM, Brion Vibber wrote:
> On Tue, Jul 10, 2012 at 10:15 AM, <[email protected]> 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
_______________________________________________
Wikitech-l mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
