MediaWiki:Common.css

From Amberlynn Wiki
Revision as of 11:34, 27 February 2025 by Admin (talk | contribs) (Created page with "CSS placed here will be applied to all skins: <div class="responsive-table"> {| class="wikitable" style="display: flex; flex-wrap: wrap; width: 100%;" |- | Cell 1 || Cell 2 || Cell 3 || Cell 4 || Cell 5 || Cell 6 |} </div> <style> .responsive-table table { border-collapse: collapse; } .responsive-table td { border: 1px solid black; padding: 8px; flex: 1 1 16.66%; Each cell takes ~1/6th of the width initially: box-sizing: border-box; } /* M...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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.
/* CSS placed here will be applied to all skins */
<div class="responsive-table">
{| class="wikitable" style="display: flex; flex-wrap: wrap; width: 100%;"
|-
| Cell 1 || Cell 2 || Cell 3 || Cell 4 || Cell 5 || Cell 6
|}
</div>

<style>
.responsive-table table {
    border-collapse: collapse;
}
.responsive-table td {
    border: 1px solid black;
    padding: 8px;
    flex: 1 1 16.66%; /* Each cell takes ~1/6th of the width initially */
    box-sizing: border-box;
}

/* Medium resolution/zoom: 3 columns, 2 rows */
@media (max-width: 800px) {
    .responsive-table td {
        flex: 1 1 33.33%; /* Each cell takes ~1/3rd of the width */
    }
}

/* Small resolution/max zoom: 1 column, 6 rows */
@media (max-width: 400px) {
    .responsive-table td {
        flex: 1 1 100%; /* Each cell takes full width */
    }
}
</style>