MediaWiki:Common.css
MediaWiki interface page
More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ===== MOBILE RESPONSIVE FIXES ===== */
@media (max-width: 768px) {
/* Fix tables on mobile */
.wikitable {
display: block;
width: 100% !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.wikitable th,
.wikitable td {
padding: 6px 8px !important;
font-size: 0.85em;
white-space: nowrap;
}
/* Fix images - make them responsive */
img {
max-width: 100% !important;
height: auto !important;
}
/* Fix hardcoded image sizes */
img[width],
img[height] {
max-width: 100% !important;
height: auto !important;
}
/* Banner images */
img[width="400"],
img[width="350"],
img[width="300"] {
width: 100% !important;
max-width: 400px !important;
height: auto !important;
}
/* Rank icons - keep small */
img[width="30"] {
width: 24px !important;
height: 24px !important;
}
/* InfoBox responsive */
.infobox {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 1em 0 !important;
}
.infobox-image img {
max-width: 200px !important;
height: auto !important;
}
/* Navbox mobile */
.navbox {
font-size: 0.85em;
}
.navbox-group {
display: block;
border-right: none;
border-bottom: 1px solid #4a7c59;
}
.navbox-list {
display: block;
text-align: center;
}
/* Portal boxes */
.portal-box {
margin: 10px 0 !important;
}
/* Quick links */
.quick-links a {
display: block;
margin: 5px 0;
padding: 12px 15px;
}
/* Welcome banner */
.welcome-banner {
padding: 15px;
}
.welcome-banner h1 {
font-size: 1.4em;
}
/* Fix styled divs */
div[style*="border:"],
div[style*="border-radius:"] {
padding: 10px !important;
margin: 10px 0 !important;
}
/* Fix text in tables */
.wikitable td,
.wikitable th {
word-wrap: break-word;
}
/* Category headers */
.category-header {
font-size: 1.1em;
padding: 10px 15px;
}
/* Hide TOC on mobile */
.toc {
display: none;
}
/* Sticky menu mobile - handled in separate section below */
/* Stats box */
.stats-box {
display: block;
margin: 10px 0;
width: 100%;
}
/* Button fixes */
.wiki-button {
display: block;
width: 100%;
margin: 5px 0;
text-align: center;
}
/* Featured box */
.featured-box {
padding: 15px;
}
}
@media (max-width: 480px) {
/* Extra small screens */
.wikitable th,
.wikitable td {
padding: 4px 6px !important;
font-size: 0.8em;
}
/* Rank icons even smaller */
img[width="30"] {
width: 20px !important;
height: 20px !important;
}
/* Smaller headings */
h2 {
font-size: 1.3em;
}
h3 {
font-size: 1.1em;
}
/* Compact navbox */
.navbox-title {
padding: 8px 10px;
font-size: 1em;
}
.navbox-list a {
padding: 4px;
font-size: 0.85em;
}
/* Welcome banner compact */
.welcome-banner h1 {
font-size: 1.2em;
}
.welcome-banner p {
font-size: 0.9em;
}
/* InfoBox image smaller */
.infobox-image img {
max-width: 150px !important;
}
}
/* ===== FIX SCROLLABLE TABLES ===== */
div[style*="overflow-y: auto"] {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
/* ===== FIX HTML IMG TAGS ===== */
html img {
max-width: 100%;
height: auto;
}
/* Make sure rank table scrolls properly on mobile */
div[style*="max-height: 600px"] {
max-height: none !important;
}
@media (max-width: 768px) {
div[style*="max-height: 600px"] {
max-height: 400px !important;
overflow-y: auto !important;
}
}
/* ===== FORCE MOBILE IMAGE FIXES ===== */
@media screen and (max-width: 768px) {
/* Force ALL images to be responsive */
.mw-parser-output img,
.mw-body-content img,
#mw-content-text img,
.citizen-body img,
html img,
img {
max-width: 100% !important;
width: auto !important;
height: auto !important;
}
/* Keep small icons their size */
img[width="30"],
img[width="32"],
img[width="24"],
img[width="20"] {
width: auto !important;
max-width: none !important;
}
/* Force banner images to scale */
img[width="400"],
img[width="350"],
img[width="300"],
img[width="250"] {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* Fix inline HTML images */
.mw-parser-output img[style*="width"],
img[style*="width"] {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* Responsive tables */
table.wikitable {
display: block !important;
overflow-x: auto !important;
white-space: nowrap;
}
/* Fix divs with hardcoded widths */
div[style*="width: 100%"],
div[style*="width:100%"] {
width: 100% !important;
}
/* Center images on mobile */
div[style*="text-align: center"] img {
display: block !important;
margin: 0 auto !important;
}
/* Infobox full width */
.infobox,
table.infobox {
float: none !important;
width: 100% !important;
margin: 1em 0 !important;
}
}
/* Extra small devices */
@media screen and (max-width: 480px) {
.mw-parser-output img[width="400"],
.mw-parser-output img[width="350"],
.mw-parser-output img[width="300"] {
width: 100% !important;
height: auto !important;
}
/* Smaller table text */
.wikitable {
font-size: 12px !important;
}
.wikitable th,
.wikitable td {
padding: 4px !important;
}
}
/* ===== FIX STICKY MENU MOBILE - ROW STYLE ===== */
@media screen and (max-width: 768px) {
#newMenu {
padding: 0 !important;
}
#newMenu ul {
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
justify-content: flex-start !important;
}
#newMenu ul li {
flex-shrink: 0;
}
#newMenu ul li a {
padding: 8px 12px !important;
font-size: 0.75em !important;
white-space: nowrap;
}
/* Hide dropdown on mobile - just main links */
#newMenu ul li ul {
display: none !important;
}
/* Reduce overall height */
#newMenu {
max-height: 40px !important;
}
body.has-sticky-menu {
padding-top: 40px !important;
}
}
@media screen and (max-width: 480px) {
#newMenu ul li a {
padding: 6px 10px !important;
font-size: 0.7em !important;
}
#newMenu {
max-height: 36px !important;
}
body.has-sticky-menu {
padding-top: 36px !important;
}
}