MediaWiki:Mobile.css: Difference between revisions

Latest revision as of 16:59, 10 June 2025

/* All CSS here will be loaded for users of the mobile site */

body {
    background-color: yellow !important;
}

/* Make images with class "full-width" behave responsively on mobile */
img.full-width {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    display: block;
    margin: 0 auto 1em auto;
}

/* Style for designated lead images on mobile */
img.lead-image {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto 1em auto;
}

/* Hide elements with the "nomobile" class on mobile */
.nomobile {
    display: none !important;
}

/* Show elements only on mobile with "mobileonly" class */
.mobileonly {
    display: block;
}

@media (min-width: 720px) {
    .mobileonly {
        display: none !important;
    }
}

/* Make gallery images scale responsively on mobile */
.mw-gallery .gallerybox .thumb img {
    width: 100% !important;
    height: auto !important;
}

/* Optional: Stack gallery items vertically instead of side-by-side */
@media (max-width: 720px) {
    .mw-gallery-traditional .gallerybox {
        width: 100% !important;
        float: none !important;
        display: block;
    }
}

/* Force packed gallery images to be responsive on mobile */
.mw-gallery-packed .gallerybox .thumb img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
    margin: 0 auto;
}

/* Ensure packed gallery boxes stack cleanly on mobile */
@media (max-width: 720px) {
    .mw-gallery-packed .gallerybox {
        width: 100% !important;
        float: none !important;
        display: block !important;
        margin-bottom: 1em;
    }
}

.mw-gallery-packed {
    background-color: pink !important;