| Line 1: |
Line 1: |
| | /* CSS placed here will affect users of the mobile site */ | | /* CSS placed here will affect users of the mobile site */ |
| | | | |
| − | /* ============================================================
| |
| − | KidzSearch Wiki – MinervaNeue / MobileFrontend Gallery Layout
| |
| − | Phones: 1 per row (big)
| |
| − | Tablets: 2 per row (bigger, not tiny)
| |
| − | ============================================================ */
| |
| − |
| |
| − | /* Base: make gallery behave nicely */
| |
| − | .mw-gallery-traditional {
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | /* PHONES: one per row, full width */
| |
| − | @media screen and (max-width: 600px) {
| |
| − |
| |
| − | .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 .thumbinner {
| |
| − | width: 100% !important;
| |
| − | max-width: 100% !important;
| |
| − | padding: 0 !important;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | .mw-gallery-traditional .gallerybox .thumb img,
| |
| − | .mw-gallery-traditional .gallerybox .thumb a > img {
| |
| − | display: block;
| |
| − | width: 100% !important;
| |
| − | height: auto !important;
| |
| − | }
| |
| − |
| |
| − | .mw-gallery-traditional .gallerytext {
| |
| − | text-align: center;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* TABLETS: two per row, larger thumbs, no “tiny single column” */
| |
| − | @media screen and (min-width: 601px) and (max-width: 1024px) {
| |
| − |
| |
| − | /* Let boxes flow side-by-side */
| |
| − | .mw-gallery-traditional .gallerybox {
| |
| − | width: 48% !important; /* 2 per row */
| |
| − | float: left !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 .thumbinner {
| |
| − | width: 100% !important;
| |
| − | max-width: 100% !important;
| |
| − | padding: 0 !important;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | .mw-gallery-traditional .gallerybox .thumb img,
| |
| − | .mw-gallery-traditional .gallerybox .thumb a > img {
| |
| − | display: block;
| |
| − | width: 100% !important;
| |
| − | height: auto !important;
| |
| − | }
| |
| − |
| |
| − | .mw-gallery-traditional .gallerytext {
| |
| − | text-align: center;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* Small polish */
| |
| − | @media screen and (max-width: 1024px) {
| |
| − | .mw-gallery-traditional .gallerybox .thumb {
| |
| − | border-radius: 10px;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | }
| |
| | | | |
| | | | |