990,022
edits
Changes
no edit summary
/* ============================================================
/* ============================================================
KidzSearch Wiki – Mobile + Tablet Gallery Sizing Fix
KidzSearch Wiki – MinervaNeue / MobileFrontend Gallery Layout
Phones: 1 per row (big)
Tablets: 2 per row (bigger, not tiny)
============================================================ */
============================================================ */
/* Phones: full width */
/* Base: make gallery behave nicely */
.mw-gallery-traditional {
width: 100%;
}
/* PHONES: one per row, full width */
@media screen and (max-width: 600px) {
@media screen and (max-width: 600px) {
.mw-gallery-traditional .gallerybox,
.mw-gallery-traditional .gallerybox {
width: 100% !important;
float: none !important;
margin: 0 0 14px 0 !important;
box-sizing: border-box;
}
.mw-gallery-traditional .gallerybox .thumb,
.mw-gallery-traditional .gallerybox .thumb,
.mw-gallery-traditional .gallerybox .thumbinner {
.mw-gallery-traditional .gallerybox .thumbinner {
width: 100% !important;
width: 100% !important;
max-width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
padding: 0 !important;
box-sizing: border-box;
box-sizing: border-box;
display: block;
display: block;
width: 100% !important;
width: 100% !important;
height: auto !important;
height: auto !important;
}
}
.mw-gallery-traditional .gallerytext {
.mw-gallery-traditional .gallerytext {
text-align: center;
text-align: center;
}
}
}
}
/* Tablets: limit width so images are not upscaled & pixelated */
/* TABLETS: two per row, larger thumbs, no “tiny single column” */
@media screen and (min-width: 601px) and (max-width: 900px) {
@media screen and (min-width: 601px) and (max-width: 1024px) {
/* Let boxes flow side-by-side */
.mw-gallery-traditional .gallerybox {
.mw-gallery-traditional .gallerybox {
width: 100% !important;
width: 48% !important; /* 2 per row */
float: left !important;
margin: 0 auto 16px auto !important;
margin: 0 2% 16px 0 !important;
box-sizing: border-box;
}
/* Remove right margin on every second item */
.mw-gallery-traditional .gallerybox:nth-child(2n) {
margin-right: 0 !important;
}
}
/* Make the thumb fill its box */
.mw-gallery-traditional .gallerybox .thumb,
.mw-gallery-traditional .gallerybox .thumb,
.mw-gallery-traditional .gallerybox .thumbinner {
.mw-gallery-traditional .gallerybox .thumbinner {
width: 100% !important;
width: 100% !important;
max-width: 520px !important;
max-width: 100% !important;
padding: 0 !important;
box-sizing: border-box;
}
}
.mw-gallery-traditional .gallerybox .thumb img,
.mw-gallery-traditional .gallerybox .thumb img,
.mw-gallery-traditional .gallerybox .thumb a > img {
.mw-gallery-traditional .gallerybox .thumb a > img {
display: block;
width: 100% !important;
width: 100% !important;
height: auto !important;
height: auto !important;
}
}
.mw-gallery-traditional .gallerytext {
.mw-gallery-traditional .gallerytext {
text-align: center;
text-align: center;
}
}
/* Small polish */
/* Small polish */
@media screen and (max-width: 900px) {
@media screen and (max-width: 1024px) {
.mw-gallery-traditional .gallerybox .thumb {
.mw-gallery-traditional .gallerybox .thumb {
border-radius: 10px;
border-radius: 10px;
}
}
}
}