#Screen width/mobile view is breaking table widths

11 messages · Page 1 of 1 (latest)

pliant merlin
#

There seems to be something that is affecting certain tables on my wiki once the screen width reaches a certain minimum and I can't figure out what the culprit is.

The intended behavior of the floating tables on this page (https://nansei.miraheze.org/wiki/Forbidden_Beast_in_Wonderland/Story) is supposed to expand to 100% screen width once the screen width reaches 768px, (seen in the wiki's common.css (https://nansei.miraheze.org/wiki/MediaWiki:Common.css), intending to match the behavior of Portable infoboxes.

The intended effect works as the table expands to the full page width and the contents are still centered. (picture 2) However once the screen width gets smaller past a point, the tables break. (picture 3) The tables seem to still be full width, but also not, as the content is aligned with the left side of the screen.

The same window width that causes these floating tables to break also breaks a simple full width table used as a navigation bar (https://nansei.miraheze.org/wiki/Template:CharacterNavigation) (pictures 4 & 5). For some strange reason, once the screen is narrow enough the full width table only takes up a fraction of the page's width.

The custom character infobox I created are also effected by this. (As seen here: https://nansei.miraheze.org/wiki/Yumi_Murasaki). Portable infoboxes however are working as intended.

Is this the result of the default theme or is there a plugin that is affecting tables site wide?

Screenshot_131.png Screenshot_130.png Screenshot_129.png Screenshot_132.png Screenshot_133.png
Nansei Project Wiki
Story
Nansei Project Wiki
Template:CharacterNavigation
woeful tundra
#

Change

    .mw-parser-output table {display: block}```
to 
```@media (max-width: calc(639px)) {
    .mw-parser-output table {display: table}```
#

Or add, rather, I think it's a default vector-2022 styling. it broke our tables too

lament knot
woeful tundra
#

Yeah it just comes from the default stylesheet so we had to override it 😩

lament knot
#

oh right

#

what she said

pliant merlin
woeful tundra
#

Yep, should work! Remember that CSS changes don't show up immediately, you'll have to wait a few minutes and then hard-refresh (CTRL+F5 or ALT+F5) your browser. If they still don't appear after that, add ?debug=2 to the end of a URL to temporarily bypass the cache.

pliant merlin