Jump to content

MediaWiki:Common.css: Difference between revisions

From WikiHikmah
No edit summary
No edit summary
Line 25: Line 25:
     margin: 1.25em auto !important;
     margin: 1.25em auto !important;
     box-sizing: border-box !important;
     box-sizing: border-box !important;
    border-left: 4px solid var(--wk-green) !important;
   }
   }


Line 72: Line 73:
   table.navbox ul {
   table.navbox ul {
     padding-left: 1.3em;
     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;
   }
   }
}
}

Revision as of 21:16, 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;
    border-left: 4px solid var(--wk-green) !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;
  }
}