MediaWiki:Mobile.css

From BD ZONE WIKI
Jump to navigation Jump to search

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.
/* ─── CRITICAL MOBILE CSS ────────────────────────────────────── */
/* Loaded separately to bypass MediaWiki CSS cache issues */

@media (max-width: 1023px) {
  #mw-panel { display: none !important; }
  #content, .mw-body { margin-left: 0 !important; width: auto !important; max-width: none !important; }
  #content { padding: 12px 16px !important; }
  #mw-head { position: static !important; }
  #left-navigation { float: none !important; width: 100% !important; }
  #right-navigation { float: none !important; width: 100% !important; margin-top: 4px !important; }
  #searchInput { max-width: 140px !important; }
  .side-nav { float: none !important; width: 100% !important; margin: 1em 0 !important; position: relative !important; top: auto !important; }
  .wynn-hero { min-height: 180px !important; }
  .wynn-hero__inner { padding: 24px 16px !important; max-width: 100% !important; }
  .wynn-hero-banner img { max-width: 280px !important; height: auto !important; }
  .wynn-gm-grid, .card-grid-3, .steps-grid { grid-template-columns: 1fr !important; }
  .feature-card { max-width: 100% !important; width: 100% !important; }
  .wynn-community-strip { flex-direction: column !important; text-align: center !important; padding: 18px !important; }
  table.wikitable, table.infobox { display: block !important; width: 100% !important; overflow-x: auto !important; }
  .bdzone-footer { padding: 24px 16px !important; }
  #mw-data-after-content { margin-left: 0 !important; width: 100% !important; }
  .bdzone-footer .footer-socials { gap: 10px !important; }
  .bdzone-footer .footer-socials a { width: 34px !important; height: 34px !important; }
  .bdzone-footer .footer-socials svg { width: 18px !important; height: 18px !important; }
}

@media (max-width: 480px) {
  #content { padding: 8px 12px !important; }
  .wynn-hero-banner img { max-width: 100% !important; }
  .hero-banner { padding: 30px 16px !important; }
  .hero-title { font-size: 1.8em !important; letter-spacing: 3px !important; }
}