MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* CSS placed here will be applied to all skins */

/* =========================================================
   Mobile fixes
   Prevent infoboxes / series boxes from crushing article text
   ========================================================= */

@media screen and (max-width: 768px) {

  .infobox,
  .navbox,
  .vertical-navbox,
  .metadata,
  table.infobox,
  table.navbox,
  table[style*="float:right"],
  table[style*="float: right"],
  div[style*="float:right"],
  div[style*="float: right"] {
    float: none !important;
    clear: both !important;
    width: calc(100% - 1.5rem) !important;
    max-width: 34rem !important;
    min-width: 0 !important;
    margin: 1.25em auto !important;
    box-sizing: border-box !important;
  }

  .infobox img,
  .navbox img,
  table.infobox img,
  table.navbox img {
    max-width: 80% !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .mw-parser-output > p,
  .mw-parser-output > ul,
  .mw-parser-output > ol {
    clear: both;
  }

  .mw-body,
  #content,
  .vector-body,
  .mw-parser-output {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box;
  }

  .mw-body h1,
  .mw-parser-output h1 {
    font-size: 2.4rem;
    line-height: 1.12;
    margin-top: 0.6em;
    margin-bottom: 0.55em;
  }

  .mw-body h2,
  .mw-parser-output h2 {
    font-size: 1.55rem;
    line-height: 1.2;
  }

  .infobox ul,
  .navbox ul,
  table.infobox ul,
  table.navbox ul {
    padding-left: 1.3em;
  }
}

The key changes are:

width: calc(100% - 1.5rem) !important;
max-width: 34rem !important;
margin: 1.25em auto !important;

That stops the box from touching the sides and makes it feel more intentional.

3. Optional: reduce that green vertical stripe

The green stripe is visually very strong on mobile. If it is part of the series box styling, soften it.

Add this inside the same mobile block:

@media screen and (max-width: 768px) {
  .infobox,
  .navbox,
  table.infobox,
  table.navbox {
    border-left: 4px solid var(--wk-green) !important;
  }
}