Steps to replicate the issue (include links if applicable):
- https://m.mediawiki.org/wiki/Help:Images#Rendering_a_gallery_of_images
- Check margin & padding.
What happens?:
Uneven gaps. Specifically left padding is too large on mobile. Seems to vary between skins.
What should have happened instead?:
Should have symmetric gaps (paddings & margins).
Software version (skip for WMF-hosted wikis like Wikipedia): -
Other information (browser name/version, screenshots, etc.):
Example gallery (https://species.m.wikimedia.org/w/index.php?title=Template:MP_pictures&oldid=9072274):
I fixed this for the main page, but that should be fixed upstream.
https://species.m.wikimedia.org/wiki/Main_Page
https://species.wikimedia.org/w/index.php?title=Template:MP/styles.css&oldid=9072279#L-59
Rule that should be setting margin&padding for galleries (but is overridden):
ul.gallery { margin:2px; padding:2px; display:block }
This rule overrides above on mobile:
.content ul { list-style-type:disc; padding-left:1em }
On desktop problematic rule is even more specific:
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { /* @noflip */ margin: 0.3em 0 0 1.6em; padding: 0; }