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:
/* All CSS here will be loaded for users of the mobile site */
@media screen and (max-width: 720px) {
  /* 1) Force navbox to show and scroll on narrow screens */
  .content .navbox,
  .content .vertical-navbox {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box;
    width: 100%;
  }


/* force navboxes to show and scroll on mobile */
  /* 2) Make the inner table width “auto” so it can overflow horizontally */
.navbox,
  .content .navbox-inner {
.navbox-inner {
    display: block !important;
  display: block !important;
    width: max-content !important;
  height: auto !important;
    min-width: 100% !important;
  max-height: none !important;
   }
  visibility: visible !important;
  opacity: 1 !important;
  overflow-x: auto !important;
   -webkit-overflow-scrolling: touch;
}


/* lay out the groups inline so they scroll as one row */
  /* 3) Line up your list items in one row */
.navbox-group,
  .navbox-group,
.navbox-list {
  .navbox-list {
  white-space: nowrap;
    white-space: nowrap;
  margin: 0;
    margin: 0;
  padding: 0;
    padding: 0;
}
  }
.navbox-group > li,
  .navbox-group > li,
.navbox-list > li {
  .navbox-list > li {
  display: inline-block;
    display: inline-block;
  float: none;
    float: none;
  }
}
}

Revision as of 21:13, 24 April 2025

@media screen and (max-width: 720px) {
  /* 1) Force navbox to show and scroll on narrow screens */
  .content .navbox,
  .content .vertical-navbox {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box;
    width: 100%;
  }

  /* 2) Make the inner table width “auto” so it can overflow horizontally */
  .content .navbox-inner {
    display: block !important;
    width: max-content !important;
    min-width: 100% !important;
  }

  /* 3) Line up your list items in one row */
  .navbox-group,
  .navbox-list {
    white-space: nowrap;
    margin: 0;
    padding: 0;
  }
  .navbox-group > li,
  .navbox-list > li {
    display: inline-block;
    float: none;
  }
}