MediaWiki:Mobile.css

From PoliticalSG
Revision as of 02:48, 12 February 2025 by SGPolitico (talk | contribs) (Created page with "→‎All CSS here will be loaded for users of the mobile site: →‎Infobox Container: .infobox-container { width: 100%; max-width: 350px; →‎Adjust max width: margin: 0 auto; float: none; →‎Prevent float issues: clear: both; } →‎Infobox Table: .infobox-table { width: 100%; border-collapse: collapse; text-align: left; } →‎Image: .infobox-image { text-align: center; padding: 5px; } →‎Headers: .infobox-header, .infob...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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.
/* All CSS here will be loaded for users of the mobile site */
/* Infobox Container */
.infobox-container {
    width: 100%;
    max-width: 350px; /* Adjust max width */
    margin: 0 auto;
    float: none; /* Prevent float issues */
    clear: both;
}

/* Infobox Table */
.infobox-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

/* Image */
.infobox-image {
    text-align: center;
    padding: 5px;
}

/* Headers */
.infobox-header, .infobox-section {
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: center;
}

/* Fields */
.infobox-field {
    font-weight: bold;
    width: 35%;
}

/* Responsive Fix */
@media screen and (max-width: 600px) {
    .infobox-container {
        max-width: 100%; /* Full width on mobile */
    }

    .infobox-table {
        font-size: 14px;
    }

    .infobox-image img {
        max-width: 100%;
        height: auto;
    }
}