User:CannonProductions/monacobookbeta.css: Difference between revisions

Revision as of 10:48, 30 December 2025

@media (max-width: 720px) {
  /* Banner: keep your scaling, but stop it from contributing to page width */
  #top-ad {
    width: 100% !important;
    overflow: hidden !important;
  }
  #top-ad iframe {
    transform: scale(0.77);
    transform-origin: top left;
  }
}

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

  /* 1) Stop the page from being wider than the viewport */
  html, body {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 2) Force the main wrappers to be fluid (don’t touch #column-one; it’s JS-toggled) */
  #globalWrapper,
  #column-content,
  #content,
  #bodyContent {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

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

  /* ✅ 3) Kill the “wobble”: don’t let the content area scroll sideways */
  #content,
  #bodyContent {
    overflow-x: hidden !important;
  }

  /* 4) Images + thumbs 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;
  }

  /* 5) Tables/navboxes: allow THESE to scroll instead of the whole page */
  #mw-content-text table.wikitable,
  #mw-content-text table.navbox {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Infoboxes: keep them from floating wide */
  .infobox {
    float: none !important;
    margin: 0 auto 1em auto !important;
    max-width: 100% !important;
  }

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