A partial archive of https://discourse-mediawiki.wmflabs.org as of Saturday May 21, 2022.

Mobile formatting of the home page

imenZr

Hi
I used the selectors id="mf-… to set a responsive design for mediawiki on mobile and various screens. but it doesn`t work.
the home page looks messy.
how can i resolve it?

aklapper

Please elaborate how you “set a responsive design” and where you changed what exactly.

imenZr

am using vector`s skin, mobileFrontend as the extension for mobile…
then i used tags like:

|style=“vertical-align: text-top;width:65%;border:1px solid #c6c9ff; border-radius:5px; padding:.5em 1em 1em; color: #000; background: #FAFAFF;”|

<b><div style=“margin-top:0; font-family:inherit; font-weight:bold; border-bottom:none; font-size:130%; padding:0 .4em;background:#135e8d; color:#f2f3f8;”><FONT face=“arial” size=“4pt”>

[[file:star.png]]

…</FONT></div></b><hr />

<div id=“mf-fa” style=“margin-bottom: auto;”>{{…}}</div>

Ciencia-Al-Poder

Usually, designing a mobile page involves using flexbox, which can adapt to different screen sizes and wrap-stretch as necessary. This is a good guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

TheDJ

The mf- classes are for special cased ‘scrapers’ of content from wikimedia homepages to display the content in mobilefrontend, which only work if the configuration variable MFSpecialCaseMainPage is set for your wiki.

This technique has/is being phased out in favour of using PROPER responsive design stylesheets, made using the TemplateStyles extension.

The documentation for the mf- classes and ids is https://www.mediawiki.org/wiki/Mobile_Gateway/Mobile_homepage_formatting#MFSpecialCaseMainPage