Wikimedia

Fix Mobile infobox styles to work well with multiple column infobox rows

This task is about MediaWiki's MinervaNeue skin.

CSS rule .content table.infobox td { width: 100% } added in https://phabricator.wikimedia.org/rEMFR98b155f7ebf75381c4e28dcab91d9d61839e8462 / https://phabricator.wikimedia.org/T162913 broke a widely used template in Czech Wikipedia. You can see an example in this article (mobile version). The table in question is below the main infobox and has the title "Přehled medailí". The middle column is much wider whereas the rightmost is as tight as possible, wrapping the words unnecessarily. Disabling the rule in browser's console fixes the problem.

Please see the Phabricator task for screenshots before and after fixing this.

Notes for a developer working on this:

A fix using flex box has been proposed in https://phabricator.wikimedia.org/T168716#3395086 [] On grade A browsers, columns should be be equally divided [] On grade C browsers which do not support flex box (e.g. IE9), the text inside the infobox should be readable although the column width does not need to be equally spaced and text can wrap if necessary.

You are expected to provide a patch in Wikimedia Gerrit. See https://www.mediawiki.org/wiki/Gerrit/Tutorial for how to set up Git and Gerrit.

Task tags

  • php
  • css
  • less

Students who completed this task

David Sn

Task type

  • code Code
  • web Design
close

2017