990,022
edits
Changes
no edit summary
/* CSS placed here will affect users of the mobile site */
/* CSS placed here will affect users of the mobile site */
/* ============================================================
/* ============================================================
KidzSearch Wiki – Mobile Gallery Full Width Fix
KidzSearch Wiki – Mobile + Tablet Gallery Sizing Fix
For MinervaNeue / MobileFrontend
For MinervaNeue / MobileFrontend
============================================================ */
============================================================ */
/* Make gallery images fill the device width on phones */
/* Phones: full width */
@media screen and (max-width: 720px) {
@media screen and (max-width: 600px) {
.mw-gallery-traditional .gallerybox,
.mw-gallery-traditional .gallerybox {
.mw-gallery-traditional .gallerybox .thumb,
.mw-gallery-traditional .gallerybox .thumbinner {
width: 100% !important;
width: 100% !important;
max-width: 100% !important;
max-width: 100% !important;
float: none !important;
float: none !important;
margin: 0 0 14px 0 !important;
margin: 0 0 14px 0 !important;
padding: 0 !important;
padding: 0 !important;
box-sizing: border-box;
box-sizing: border-box;
max-width: 100% !important;
max-width: 100% !important;
padding: 6px 2px 0 2px !important;
padding: 6px 2px 0 2px !important;
text-align: center;
text-align: center;
}
}
}
}
/* Slight rounding so images look nicer on phones */
/* Tablets: limit width so images are not upscaled & pixelated */
@media screen and (max-width: 720px) {
@media screen and (min-width: 601px) and (max-width: 900px) {
.mw-gallery-traditional .gallerybox {
width: 100% !important;
max-width: 520px !important; /* <-- key line */
margin: 0 auto 16px auto !important;
float: none !important;
}
.mw-gallery-traditional .gallerybox .thumb,
.mw-gallery-traditional .gallerybox .thumbinner {
width: 100% !important;
max-width: 520px !important;
}
.mw-gallery-traditional .gallerybox .thumb img,
.mw-gallery-traditional .gallerybox .thumb a > img {
width: 100% !important;
max-width: 520px !important;
height: auto !important;
}
.mw-gallery-traditional .gallerytext {
max-width: 520px !important;
margin: 0 auto !important;
text-align: center;
}
}
/* Small polish */
@media screen and (max-width: 900px) {
.mw-gallery-traditional .gallerybox .thumb {
.mw-gallery-traditional .gallerybox .thumb {
border-radius: 10px;
border-radius: 10px;