Wikimedia Developer Support

Mobile formatting of the home page


#1

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?


#2

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


#3

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>


#4

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/


#5

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