MediaWiki:Common.css: Difference between revisions
Fix layout |
added mobile support |
||
| Line 1,233: | Line 1,233: | ||
} | } | ||
/* ========================================================================== | |||
MOBILE / NARROW WINDOW FIXES | |||
Fixed-column grids on the main page (and any other page) don't shrink | |||
below their content's natural width, which forces the whole page to | |||
scroll horizontally on phones and narrow windows. Collapse them to fewer | |||
columns instead of letting them overflow, and give grid/flex children an | |||
explicit min-width so they're actually allowed to shrink. | |||
========================================================================== */ | |||
body, html { | |||
overflow-x: hidden; | |||
} | |||
.mainpage-container, .mainpage-layout, .mainpage-header, | |||
.tile-row, .updates-row, .categories-grid, .popular-grid, .skills-grid, | |||
.update-card, .category-card, .skill-item, .header-intro, .header-stats { | |||
min-width: 0; | |||
} | |||
/* Any image, table, or file thumbnail (including the Interactive Map's | |||
<imagemap>) should shrink to fit rather than force a scrollbar. Explicit | |||
width/height attributes are kept by the browser for the image's own | |||
scaling math (and for <imagemap> AREA coordinate scaling), so this is | |||
safe even for the world map. */ | |||
img, .thumb, .thumbinner, .image { | |||
max-width: 100% !important; | |||
height: auto !important; | |||
} | |||
@media screen and (max-width: 700px) { | |||
.categories-grid, .popular-grid, .skills-grid { | |||
grid-template-columns: repeat(2, 1fr) !important; | |||
} | |||
.updates-row { | |||
grid-template-columns: 1fr !important; | |||
} | |||
} | |||
@media screen and (max-width: 460px) { | |||
.categories-grid, .popular-grid, .skills-grid { | |||
grid-template-columns: 1fr !important; | |||
} | |||
} | |||
/* Item/monster infobox portrait is a fixed 250px; on very narrow screens | |||
that can be wider than the infobox itself is allowed to shrink to. */ | |||
@media screen and (max-width: 460px) { | |||
.infobox { | |||
width: 100% !important; | |||
max-width: 320px; | |||
} | |||
} | |||
/* Forced refresh 2 */ | /* Forced refresh 2 */ | ||