Making MediaWiki Mobile Friendly
The purpose of this page is to identify known problems with MediaWiki pages (including Wikipedia) when displayed via the MobileFrontend extension and provide a method of resolution. As common inline styling problems are discovered they will be listed here with a suggested way of fixing them. Known pages that exhibit the problem will eventually be linked to from this page. Any help you can give fixing these problems would be much appreciated.
This page is watched so if you find something that renders incorrectly on the mobile site please record it here and as a community we can come to an agreement of how to resolve, list effected pages and together fix them up.
Two column layouts
Problem: Certain pages (mostly portals) have two column layouts which do not work on mobile
Cause: These tend to be caused by inline styles in one of the following forms
Resolution: Replace inline styles with generic two column layout classes (on English Wikipedia: portal-column-left-wide, portal-column-left, portal-column-right, portal-column-right-narrow) so stylesheets can feature rules to deal with these on smaller screens
Pages effected: List of Problematic portal pages with two column layouts
Use of column-count
Problem: Certain pages have reference/note pages that appear squashed on mobile
Cause: These pages make use of the column-count css property.
Resolution: We should introduce a class in the affected wiki's MediaWiki:Common.css that provides this column-count property rather than placing it in an inline style (see here). We should then cleanup articles to use this class instead (e.g. column-count:4; is replaced by use of class .column-count-4 ).
- Is not making use of column-width instead of column-count a better solution ? See also wikipedia:en:MediaWiki talk:Common.css/Archive 14#Column-count usage across Wikipedia. TheDJ (talk) 20:51, 5 June 2012 (UTC)
Pages effected: List of Problematic pages with multi column lists
Template for broken style
Please copy this section to record a new problem above.
insert image here
Problem: Explain the image above outlining what the problem is
Cause: Explain what styling is causing this problem.
put sample code here
Resolution: Describe a resolution to the problem
Examples: link to a fix in the diff
Pages effected: This should link to a list of articles that are effected by the problem. Lists can be generated by downloading a dump of latest articles and grepping for pattern