MediaWiki:Mobile.css: Difference between revisions

From PoliticalSG
(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...")
 
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* All CSS here will be loaded for users of the mobile site */
/* All CSS here will be loaded for users of the mobile site */
/* Infobox Container */
/* Make Infobox Full Width on Mobile */
.infobox-container {
.infobox-container {
     width: 100%;
    float: none !important;
     max-width: 350px; /* Adjust max width */
     width: 100% !important;
     margin: 0 auto;
     max-width: 100% !important;
     float: none; /* Prevent float issues */
    overflow: visible !important;
     clear: both;
     margin: 15px 0 !important;
    clear: both !important;
    display: block !important;
}
.infobox-table,
.infobox-container table.wikitable {
    width: 100% !important;
    font-size: 14px;
    display: table !important;
}
.infobox-image img {
     max-width: 100%;
     height: auto;
}
}


/* Infobox Table */
/* Override inline styles on the infobox div (written by template) */
.infobox-table {
div[style*="width:30%"],
     width: 100%;
div[style*="width: 30%"],
     border-collapse: collapse;
div[style*="float:right"],
     text-align: left;
div[style*="float: right"] {
    float: none !important;
     width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
     margin-top: 15px !important;
     margin-bottom: 15px !important;
    clear: both !important;
    display: block !important;
}
div[style*="width:30%"] table.wikitable,
div[style*="width: 30%"] table.wikitable,
div[style*="float:right"] table.wikitable,
div[style*="float: right"] table.wikitable {
    width: 100% !important;
    display: table !important;
}
}


/* Image */
.infobox-person {
.infobox-image {
     float: none !important;
     text-align: center;
    width: 100% !important;
     padding: 5px;
    max-width: 100% !important;
     margin: 0 0 1em 0 !important;
    clear: both !important;
    display: block !important;
    box-sizing: border-box !important;
}
}
 
.infobox-person table {
/* Headers */
     width: 100% !important;
.infobox-header, .infobox-section {
     background-color: #f2f2f2;
    font-weight: bold;
    text-align: center;
}
}


/* Fields */
.infobox-political-party {
.infobox-field {
     float: none !important;
     font-weight: bold;
    width: 100% !important;
     width: 35%;
    min-width: 0 !important;
     max-width: 100% !important;
    margin: 0 0 1em 0 !important;
    clear: both !important;
    display: block !important;
    box-sizing: border-box !important;
}
}
 
.infobox-political-party table {
/* Responsive Fix */
     width: 100% !important;
@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;
    }
}
}

Latest revision as of 12:48, 24 May 2026

/* All CSS here will be loaded for users of the mobile site */
/* Make Infobox Full Width on Mobile */
.infobox-container {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin: 15px 0 !important;
    clear: both !important;
    display: block !important;
}
.infobox-table,
.infobox-container table.wikitable {
    width: 100% !important;
    font-size: 14px;
    display: table !important;
}
.infobox-image img {
    max-width: 100%;
    height: auto;
}

/* Override inline styles on the infobox div (written by template) */
div[style*="width:30%"],
div[style*="width: 30%"],
div[style*="float:right"],
div[style*="float: right"] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    clear: both !important;
    display: block !important;
}
div[style*="width:30%"] table.wikitable,
div[style*="width: 30%"] table.wikitable,
div[style*="float:right"] table.wikitable,
div[style*="float: right"] table.wikitable {
    width: 100% !important;
    display: table !important;
}

.infobox-person {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1em 0 !important;
    clear: both !important;
    display: block !important;
    box-sizing: border-box !important;
}
.infobox-person table {
    width: 100% !important;
}

.infobox-political-party {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 1em 0 !important;
    clear: both !important;
    display: block !important;
    box-sizing: border-box !important;
}
.infobox-political-party table {
    width: 100% !important;
}
Retrieved from "https://politicalsg.com/index.php?title=MediaWiki:Mobile.css&oldid=4899"