Mobile Gateway/Mobile homepage formatting

Main pages of MediaWiki instances which go beyond traditional text (for example using two column layouts) usually require special treatment to display on mobile via  in responsive skins such as  and .

If the main page (homepage) of your Wikimedia project has not been formatted to be viewed on mobile devices, and you are an administrator of that project, please follow the instructions below.

Please note: In most cases, you must have administrator rights in order to edit the main page.

Step 1
First, decide what content is suitable for the mobile homepage.

Evaluate the page elements in the desktop version (e.g. "Picture of the Day") by asking:


 * how popular are they?
 * are they updated regularly?
 * are they suitable for quick reading?
 * will they fit nicely in a mobile screen?

Once you decide which elements make sense, proceed to Step 2.

Step 2
You must be logged in and have administrative rights to do the following. On the desktop view of the homepage, click "" and find the elements you want to include in the mobile view.

Each element you want excluded from the page should be given a class "nomobile" or wrapped in an element with this class present.



What goes in between the opening and closing div tags? It will most likely be a template for the page element, such as "Picture of the Day".

Updating styles
Certain styles are not mobile friendly. For example any css rules which make use of fixed pixel size e.g. width, height, padding. If different style treatment is needed please use  or port these styles to MediaWiki:Common.css or MediaWiki:Mobile.css.

TemplateStyles is recommended but 3rd parties may wish to use the MobileFrontend feature flag $wgMFSiteStylesRenderBlocking.

For common problems with table based layouts, you can use the styles in the [<tvar|url>https://gist.github.com/jdlrobson/dbb124296ed2a1fc7242018c7b589059</> Minerva compatiblity template].

Some tips on common problems are addressed at <tvar|1></>.

Click "<tvar|save></>".

You are almost done.

Step 3
Now go to the mobile URL, which is typically languagecode.m.project.org. You can reduce the width of your desktop browser to mimic a mobile screen. How does the page look?

If you want to make changes, go back to Step 2. Keep going from Step 2 to Step 3 until you are satisfied.

That's it!