Talk:Mobile Gateway/Mobile homepage formatting

Hi there! Is there any way to show completely different content for desktop users and mobile users? --C.eiermann (talk) 15:50, 26 July 2014 (UTC)
 * Hello C.eiermann. First: Plase use the talk page for MobileFrontend, i don't know, how much people read here :P It's possible to show a complete different content for mobile users, that's what explainend in this article :) Just define some div containers with id "mf-something" (where something is a string choosed by you). These containers are only visible in mobile view, not in desktop.

使用“ nomobile”的方式做移动的标注实在是太笨的方法
nomobile这种方式是吧原本不被干扰的全部干扰. 这种问题绝对不能用排除法. 应该是需要使用再标注的方式. 以前的mf-方式标注是非常对的. 建议改回来.

— Preceding unsigned comment added by Litanwei (talk • contribs) 02:34, 23 July 2016 (UTC)

mf-* elements
, could you please let us know why did you remove the mf-* instructions? Judging from the current code, these still work. Is there currently an alternative way to choose the sections to be used in the mobile main page?--Strainu (talk) 20:37, 19 June 2017 (UTC)


 * Yes. Use nomobile on the sections you do not want used. The mf- ids are enabled by a deprecated feature flag that is not enabled by default. When Extension:TemplateStyles gets deployed you can expect some messaging relating to removing usages as this will give far more control to editors. Jdlrobson (talk) 00:37, 20 June 2017 (UTC)
 * Well, the problem is without mf- ids, only FA articles and news are displayed on ro.wp main page. See with mf vs. without mf (the DYK section is probably there simply because of a bug - it's not actually considered a section). How are "sections" detected?--Strainu (talk) 15:56, 24 June 2017 (UTC)


 * Hi sorry again for slow reply. You can ping to get me quicker!

So we're trying to move away from this markup and remove the code associated with it as Extension:TemplateStyles is on the horizon. We're thus discouraging usage. The mobile site preferably should not need to make big HTML changes to your main page.

This page shows how to remove the elements you want: https://ro.m.wikipedia.org/wiki/Utilizator:Jon_(WMF)/sandbox/mainpage?useformat=mobile The remaining problem with this page is the use of tables and fixed width.

This can be fixed on mobile by doing: You'll need to move some of the rules currently in the template into MediaWiki:Common.css and update the inline styles. of mainpage-box to get the desired effect but no mf- attributes should be needed. Does that make sense? Jon (WMF) (talk) 00:07, 8 July 2017 (UTC)

MFSpecialCaseMainPage
How can we activate MFSpecialCaseMainPage like Genman Wikipedia? Or there is another way to add elements to the mobile site. I can't understand above answer. --Motoko C. K. (talk) 10:47, 3 August 2017 (UTC)


 * MFSpecialCaseMainPage is being deprecated. I hope https://www.mediawiki.org/wiki/Mobile_Gateway/Mobile_homepage_formatting#Deprecation_steps_for_wikis_using_MFSpecialCaseMainPage helps? Jdlrobson (talk) 22:05, 3 August 2017 (UTC)
 * So, how can we add a new element to the mobile site homepage? Now, we can see only a featured article and news on the mobile site of Korean Wikipedia, although we can also see a good article and a featured picture on the desktop site. How can we fix the mobile site in this situation?--Motoko C. K. (talk) 22:19, 4 August 2017 (UTC)


 * Could you provide a bit more background on what you are trying to achieve? The goal of this deprecation is to ensure content on the main page is consistent across mobile and desktop by making content the same for both mobile and desktop by following a mobile first responsive design. this draft demonstrates how you can turn the existing main page into a responsive design. With the exception of the top header (which is a table), the entire design looks great and displays perfectly on mobile. The `pre` tag at the top of the page shows what TemplateStyles may look like for this page to make it work the same on desktop. Does that help understanding? Jdlrobson (talk) 14:07, 7 August 2017 (UTC)
 * I carefully read the explanation you wrote. I think it's useful. If I have more questions, I will tell you. :) --Motoko C. K. (talk) 06:10, 8 August 2017 (UTC)

Assuming you do not want to do a big redesign
Assuming you do not want to do a big redesign [...], you can follow this guide: [...] 1. Stop using tablesCouldn't help but notice how helpful is this advice (as correct as it is) to users who don't want a big redesign. Given the complexity of mainpages, it's basically a complete redesign. Edward Chernenko (talk) 08:28, 3 July 2018 (UTC)

Does this edit help? https://www.mediawiki.org/wiki/Special:MobileDiff/2824551 The idea is not to change the display but simply swap out table HTML for divs. Jdlrobson (talk) 17:40, 9 July 2018 (UTC)

You must have administrator rights in order to edit the homepage
Why? I’m asking because it’s not true – the main page might be protected on many wikis, but it’s not special cased at all in this sense, and may be edited by autoconfirmed users on a large number of wikis, somewhere even by anons. —Tacsipacsi (talk) 22:10, 19 January 2019 (UTC)
 * I clarified that. A year later :). Ammarpad (talk) 06:19, 5 January 2020 (UTC)

Exemple pages in ENglish rather than in KO ?
For more readability, is is possible to have in "2. Review any inline styles" and in "6. Remove any mobile specific ids." example pages in english please ? instead of respectively https://ko.m.wikipedia.org/wiki/%ED%8A%B9%EC%88%98:%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%B0%A8%EC%9D%B4/19238099 and https://ko.m.wikipedia.org/wiki/%ED%8A%B9%EC%88%98:%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%B0%A8%EC%9D%B4/19238126. Adding links to view the rendering is a plus. Thanks.

Christian FR (talk) 11:28, 20 March 2020 (UTC)

Urgent: Editors must review their main pages to avoid them breaking on mobile
Apologies for writing this message in English and pinging you but I'm keen to avoid your projects breaking to mobile users because of an upcoming technical change. If I am reaching out to you, your project is impacted and I have noticed you recently edited the main page of the associated impacted project.

After this change, your main page will no longer apply these legacy transforms.

What do I need to do?
 * Where I've pinged you (sometims multiple times) please check the test link on a mobile device and understand what your main page will look like after this change.
 * Familiarise yourself with https://phabricator.wikimedia.org/T246401 about the required action.
 * Help me identify an ambassador in each of the impacted projects to help avoid issues.
 * If you can help make this change, let me know.
 * If you can't help with this change, please ping a more appropriate person in this talk topic.
 * If you need help with these changes or want me to take care of them - please let me know and give me permission here - I can make the required technical changes if needed as a last resort.
 * If you plan to make no changes, let me know.

Thank you in advance for your help here!

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?

test link Can any of the following users help with this technical change?


 * 1) Italian Wikivoyage

Jdlrobson (talk) 18:27, 20 May 2020 (UTC)
 * @Jdlrobson, I'm a bit disapponted that you forget test link but I can "forgive" you if you can support me on few things :-P
 * activate immediately the new view mode (the current one is terrible and after the change I've made also useless)
 * some support to complete the conversion:
 * Allow the background of the .header to color the complete top part of the box (like in the desktop view)
 * To reorganize the content of the two main table (well div :-)) to show it properly also on small screen
 * Thanks in advance, --Andyrom75 (talk) 22:02, 26 May 2020 (UTC)


 * Looks like I already made a note to update Italian Wikivoyage (I presume because I saw it was already broken on mobile). I will make sure to switch to new mode in my next config change. Per background of .header - we don't support this. If you want to change the header style right now that's limited to desktop Minerva via MediaWiki:Common.css. What is it you are trying to achieve - can you share the CSS you were thinking about? It's possibly something that we could bake into the software itself.

English Wikipedia has an example of how to convert tables to block elements on mobile that might be a helpful first step - see the section /* SKIN-MINERVA */ on https://en.wikipedia.org/wiki/Wikipedia:Main_Page/styles.css - media queries are preferred to skin-minerva rules however since they aid everyone e.g. Timeless, Monobook etc.. :) Jdlrobson (talk) 02:24, 27 May 2020 (UTC)