MediaWiki:Mobile.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)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

@media screen and (max-width: 720px) {
  /* 1) Make the outer navbox a capped, scrollable container */
  .content .navbox,
  .content .vertical-navbox {
    display: block !important;
    max-width: 90vw !important;        /* never wider than 90% of viewport */
    width: auto !important;            /* let it shrink below 100% if it can */
    overflow-x: hidden !important;       /* horizontal scroll if content spills */
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box;
    margin: 0 auto 1em;                /* center & give a little bottom spacing */
  }
  /* kill that inline width:1% on the group header */
  .content .navbox-group {
    padding-left: 1em!important;
    text-indent: .75em!important;
  }

  /* 2) Make the inner wrapper inline-block so it shrink-wraps its contents */
  .content .navbox-inner {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* 3) Turn each list into a flex container that wraps onto new lines */
  .content .navbox-group,
  .content .navbox-list {
    display: flex !important;
    flex-wrap: wrap !important;        /* allow items to wrap */
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.5em;                         /* spacing between items */
  }

  /* 4) Style each item appropriately */
  .content .navbox-group > li,
  .content .navbox-list > li {
    display: inline-block !important;  /* so padding/margins apply cleanly */
    float: none !important;
    margin: 0 !important;
  }
}