Mobile styling considerations[edit | edit source]
Styling for a mobile environment comes with a few special considerations in general:
- Screen size: Generally speaking no one will be viewing the mobile view at a higher resolution than 1024x768px, so elements must be appropriately sized to both fit and remain legible on the small screen. The responsive design mode in your browser's developer tools may be used to simulate different device sizes (guide for Firefox, Chrome).
- Data limits: Not everyone has unlimited data or consistent access to WiFi on their mobile device, so any images and files used in the styling of the mobile skin should be kept small. In general, JPG files result in smaller file sizes and therefore should be used on mobile skins instead of PNG files.
In addition, styling for wikis on mobile frontend comes with some additional considerations:
- The mobile skin does not use any styles from the desktop skin, and therefore must be styled entirely separately. Any custom styles applied to the desktop skin must also be applied on the mobile skin in order for them to be visible on mobile.
- Some elements from the desktop view are hidden by default on mobile view, including the wiki logo, navboxes, and the sidebar.
Examples[edit | edit source]
Sample CSS[edit | edit source]
Sample CSS files for light and dark mobile themes can be found on the Gamepedia default loadout:
Using Gadgets for dark mobile skins[edit | edit source]
A workaround to this is to use the Gadgets extension to create a dark mobile theme. Since Gadgets CSS files load through ResourceLoader, they will load with the rest of the CSS and be cached appropriately. One caveat to this is that all selectors used in a mobile-specific gadget must be prefixed with
.skin-minerva to avoid affecting the desktop theme as ResourceLoader parameters to target the specific skin/user type are currently bugged and styles targeted to mobile apply on both mobile and desktop skins.
Troubleshooting[edit | edit source]
Styles get overridden by MobileFrontend defaults[edit | edit source]
MobileFrontend uses some excessively specific CSS selectors in its default styles, resulting in some style being overridden by the default. This can often be solved by simply prepending
.skin-minerva to the selector of the style that is being overridden.