MediaWiki:Common.css: Difference between revisions

Revision as of 21:08, 25 April 2026

/* 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;
  }
}