MediaWiki:Mobile.css: Difference between revisions

From ChimniWiki
Jump to navigation Jump to search
(Created page with "→‎All CSS here will be loaded for users of the mobile site: →‎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...")
 
No edit summary
Line 23: Line 23:
     .mobileonly {
     .mobileonly {
         display: none !important;
         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;
     }
     }
}
}

Revision as of 16:24, 6 June 2025

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

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