2

The mobile version of the fandom wikis are very restricted, and actively strips away all style tags from html elements.

I tried to define styles in MediaWiki:Common.css and that works on desktop, but it does not apply on mobile.

I have also tried to add stuff in MediaWiki:Mobile.css which was actually existing initially with a comment saying:

/* All CSS here will be loaded for users of the mobile site */

But the styles I added here did not load either in the mobile theme.

Is it possible to apply any custom css that is applied in the mobile theme on a Fandom wiki page?

See example on this page:

Animals (desktop)

Here you see example of an animal image with a label text that is styled with CSS to look like a "shield":

Rabbit on desktop

For the mobile version, this style does not have effect:

Rabbit on mobile
This shows the original image as is without css styling on the container that would cut it in a shield form, and the label text below also without css styling. When I look at the source in browser debugger tools, I see that the html is correct, and the css class names are added, but the style is not loaded.

awe
  • 21,938
  • 6
  • 78
  • 91

1 Answers1

1

Historically, Fandom prevented wiki admins from adding custom CSS (and JS) for the mobile skins. They preferred maintaing a plain and uniformal look for the mobile view.

However, a continious push from the community made them reconsider the policy, and on late 2022 they announced a proposed change, which took place in steps during the following months.

On April 22, 2023, Fandom officially announced that custom CSS for mobile is available for editing by local admins on all Fandom wikis, using MediaWiki:FandomMobile.css

As with any custom code, it has to follow Fandom's Customization Policy.

It should be noted that personal custom CSS and JS for mobile were already available for a while by editing local user subpages. However global personal CSS and JS don't affect the mobile skin.

Noam
  • 1,317
  • 5
  • 16