MediaWiki:Mobile.css: Difference between revisions

From Candypedia
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
Line 1: Line 1:
@media screen and (max-width: 720px) {
@media screen and (max-width: 720px) {
   /* 1) Force navbox to show and scroll on narrow screens */
   /* 1) Un-hide the navbox that Minerva’s mobile CSS has display:none’d */
   .content .navbox,
   .content .navbox,
   .content .vertical-navbox {
   .content .vertical-navbox {
     display: block !important;
     display: block !important;
     overflow-x: auto !important;
     visibility: visible !important;
     -webkit-overflow-scrolling: touch !important;
    height: auto !important;
     max-height: none !important;
    opacity: 1 !important;
     box-sizing: border-box;
     box-sizing: border-box;
     width: 100%;
     width: 100% !important;
   }
   }


   /* 2) Make the inner table width “auto” so it can overflow horizontally */
   /* 2) Turn the inner table into a scroll container */
   .content .navbox-inner {
   .content .navbox-inner {
     display: block !important;
     display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
     width: max-content !important;
     width: max-content !important;
     min-width: 100% !important;
     min-width: 100% !important;
   }
   }


   /* 3) Line up your list items in one row */
   /* 3) Lay out all your groups/items in a single row */
   .navbox-group,
   .content .navbox-group,
   .navbox-list {
   .content .navbox-list {
     white-space: nowrap;
     white-space: nowrap !important;
     margin: 0;
     margin: 0 !important;
     padding: 0;
     padding: 0 !important;
   }
   }
   .navbox-group > li,
   .content .navbox-group > li,
   .navbox-list > li {
   .content .navbox-list > li {
     display: inline-block;
     display: inline-block !important;
     float: none;
     float: none !important;
   }
   }
}
}

Revision as of 21:18, 24 April 2025

@media screen and (max-width: 720px) {
  /* 1) Un-hide the navbox that Minerva’s mobile CSS has display:none’d */
  .content .navbox,
  .content .vertical-navbox {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    box-sizing: border-box;
    width: 100% !important;
  }

  /* 2) Turn the inner table into a scroll container */
  .content .navbox-inner {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: max-content !important;
    min-width: 100% !important;
  }

  /* 3) Lay out all your groups/items in a single row */
  .content .navbox-group,
  .content .navbox-list {
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .content .navbox-group > li,
  .content .navbox-list > li {
    display: inline-block !important;
    float: none !important;
  }
}