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) {

  /* Stop right-floating boxes on mobile */
  .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: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 1em 0 !important;
    box-sizing: border-box !important;
  }

  /* Make images inside boxes behave */
  .infobox img,
  .navbox img,
  table.infobox img,
  table.navbox img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Stop article text from wrapping beside boxes */
  .mw-parser-output > p,
  .mw-parser-output > ul,
  .mw-parser-output > ol {
    clear: both;
  }

  /* Give the page more comfortable mobile spacing */
  .mw-body,
  #content,
  .vector-body,
  .mw-parser-output {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box;
  }

  /* Slightly reduce giant headings on phone */
  .mw-body h1,
  .mw-parser-output h1 {
    font-size: 2.1rem;
    line-height: 1.15;
  }

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

  /* Improve list readability inside infoboxes */
  .infobox ul,
  .navbox ul,
  table.infobox ul,
  table.navbox ul {
    padding-left: 1.4em;
  }
}