MediaWiki:Mobile.css: Difference between revisions

From Spacewalk Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(5 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 Mobile Responsive CSS */
.infobox-wrapper {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    margin: 1em 0 !important;
    box-sizing: border-box !important;
}
.infobox {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}


/* Infobox responsive */
.infobox img {
.infobox-wrapper {
    max-width: 100% !important;
     float: right;
    height: auto !important;
     clear: right;
}
    margin: 0 0 1em 1em;
 
     width: 250px;
.infobox th {
    width: auto !important;
    min-width: 30% !important;
}
 
.infobox td {
    width: auto !important;
}
 
/* Optional: Make infobox stand out more on mobile */
.infobox {
     box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
     border-radius: 4px !important;
}
 
.infobox th:first-child {
     border-top-left-radius: 4px !important;
}
}


@media screen and (max-width: 768px) {
.infobox th:last-child {
    .infobox-wrapper {
    border-top-right-radius: 4px !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        margin: 1em 0 !important;
        box-sizing: border-box;
    }
   
    .infobox-wrapper table {
        width: 100% !important;
    }
   
    .infobox-wrapper img {
        max-width: 100% !important;
        height: auto !important;
    }
}
}

Latest revision as of 11:34, 25 May 2025

/* All CSS here will be loaded for users of the mobile site */
/* Infobox Mobile Responsive CSS */
.infobox-wrapper {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    margin: 1em 0 !important;
    box-sizing: border-box !important;
}

.infobox {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

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

.infobox th {
    width: auto !important;
    min-width: 30% !important;
}

.infobox td {
    width: auto !important;
}

/* Optional: Make infobox stand out more on mobile */
.infobox {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
}

.infobox th:first-child {
    border-top-left-radius: 4px !important;
}

.infobox th:last-child {
    border-top-right-radius: 4px !important;
}