Topic on Lankide eztabaida:Theklan

I noticed that the mobile main page looks awful. Debugging this I see that the main page uses styles in MediaWiki:Common.css. This is bad practice as it means pages that are not the main page are unnecessarily using various styles (making pages slower to display) and that they won't apply on mobile. Mobile page views are high for most of our projects, the page appears broken, so I'm worried this might be driving a lot of users away from the site.

Luckily this situation can easily be fixed.

These can be migrated into a template stylesheet by:

• Adding the main page styles from MediaWiki:Common.css to https://eu.wikipedia.org/w/index.php?title=Txantiloi:Azala/styles.css&action=edit and protecting that page
• Adding to the top of the wikitext for the main page
• Removing the styles from MediaWiki:Common.css

Are you the right person to talk to about this? Do you need any help with this?

https://www.mediawiki.org/wiki/Extension:TemplateStyles

Yes, I'm the right perston to talk about this. This is something I want to make, I want to move some things to TemplateStyles, and I'll check how it is seen in the mobile phone. The last time I checked it was meh, but not awful.

I think I have done every step... let's see how it spreads.

It breaks the main page in laptop. In mobile it looks very similar, I think. I have deleted the wrapper="div.example" part.

I have made some changes in the code (some "nomobile" were missing) and now it looks better. Give me your opinion, please!

It does look a lot better than before. Thanks for prioritizing working on this so quickly.

I think the fact "nomobile" and "mf-mobile-only" is still used is a shame. A lot of good content gets lost unnecessarily on mobile. I don't see any reason why the desktop version can't be the same as mobile. I think the following code (and renaming the class) would go a long way.

<code>

@media all and (max-width: 500px ) {

  .nomobile, /* rename nomobile class to collapsemobile */

  .nomobile > div {

    width: 100% !important;

     margin-left: 0 !important;

    margin: auto;

    text-align: center;

  }

}

</code>

Thanks Jon, I'll give a try. I wonder if this would work with the three featured articles in the top. The system was created within the constraints of vector (and some of the css complex codes can't be used at common.css), and the three articles system is quite messy. The only interesting part now missing in the mobile version is the image of the week (I was thinking on working on that today). And I'd like to work also on the title format for mobile.