MediaWiki:Mobile.css

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 */

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;
}

/* 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;