User:CannonProductions/monacobookbeta.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.

@media (max-width: 720px) {
  #top-ad { height: 60px !important; }
  #top-ad iframe { height: 60px !important; }
}

  /* The banner is 468px wide. Scale it down depending on screen width. */
  #top-ad iframe {
    transform-origin: top left;
  }

  /* Big phones / small tablets */
  @media (min-width: 421px) {
    #top-ad iframe { transform: scale(0.90); }
  }

  /* Typical phones */
  @media (max-width: 420px) {
    #top-ad iframe { transform: scale(0.78); }
  }

  /* Small phones */
  @media (max-width: 360px) {
    #top-ad iframe { transform: scale(0.72); }
  }

  /* Tiny phones */
  @media (max-width: 320px) {
    #top-ad iframe { transform: scale(0.65); }
  }
}

/* ===== Mobile width/overflow fixes for TFWiki (MonacoBook-ish skins) ===== */
@media (max-width: 720px) {

  /* Full-width layout (stop the “narrow centered column” effect) */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: visible !important; /* don’t clip menus/panels */
  }

  #globalWrapper,
  #column-content,
  #content,
  #bodyContent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;          /* IMPORTANT: no auto-centering */
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Give article text some breathing room */
  #content, #bodyContent {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* MonacoBook/older skins often reserve space for the sidebar with margins */
  #column-content,
  #content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Prevent sideways scroll without breaking dropdowns:
     hide overflow only on the article area, NOT the whole page */
  #content,
  #bodyContent {
    overflow-x: hidden !important;
  }

  /* Make sure the “more” dropdown and tab menus can actually appear */
  #p-cactions,
  #p-cactions .pBody,
  #column-content {
    overflow: visible !important;
  }
  #p-cactions {
    position: relative !important;
    z-index: 10000 !important;
  }

  /* Main Page uses two columns (.mainleft/.mainright) — stack them on mobile */
  #mw-content-text .mainleft,
  #mw-content-text .mainright {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: center;
  }

  /* Media should never force horizontal scroll */
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  .thumb, .thumbinner {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Wide tables/navboxes: scroll the table, not the whole page */
  #mw-content-text table.wikitable,
  #mw-content-text .navbox,
  #mw-content-text table.navbox {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Long unbroken text/URLs/code can push width */
  .mw-parser-output {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  pre, code {
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }
}