MediaWiki:Mobile.css: Difference between revisions
Appearance
Created page with "→========================= MOBILE RESPONSIVE FIXES MediaWiki Common.css =========================: →Prevent horizontal scrolling: html, body { max-width: 100%; overflow-x: hidden; } →Make images scale properly: img { max-width: 100%; height: auto; } →Responsive tables: table { width: 100%; max-width: 100%; overflow-x: auto; display: block; } →Infobox mobile behavior: .infobox { float: right; width:..." |
No edit summary |
||
| Line 1: | Line 1: | ||
/* ========================= | /* ========================= | ||
MOBILE | MOBILE WIKI OPTIMIZATION | ||
========================= */ | ========================= */ | ||
/* Prevent | /* Prevent weird mobile zoom behavior */ | ||
html, body { | html { | ||
-webkit-text-size-adjust: 100%; | |||
} | |||
/* General body styling */ | |||
body, | |||
.mw-body, | |||
.vector-body { | |||
font-size: 18px; | |||
line-height: 1.6; | |||
max-width: 100%; | max-width: 100%; | ||
overflow-x: hidden; | overflow-x: hidden; | ||
word-wrap: break-word; | |||
overflow-wrap: break-word; | |||
box-sizing: border-box; | |||
padding-left: 10px; | |||
padding-right: 10px; | |||
} | |||
/* Paragraphs and lists */ | |||
p, | |||
li, | |||
td, | |||
th { | |||
font-size: 1rem; | |||
line-height: 1.6; | |||
} | |||
/* Headings */ | |||
h1 { | |||
font-size: 2rem; | |||
line-height: 1.2; | |||
} | |||
h2 { | |||
font-size: 1.6rem; | |||
line-height: 1.3; | |||
} | |||
h3 { | |||
font-size: 1.3rem; | |||
line-height: 1.4; | |||
} | |||
h4 { | |||
font-size: 1.1rem; | |||
} | } | ||
/* | /* Images */ | ||
img { | img { | ||
max-width: 100%; | max-width: 100%; | ||
| Line 16: | Line 58: | ||
} | } | ||
/* | /* Tables */ | ||
table { | table { | ||
width: 100%; | width: 100%; | ||
max-width: 100%; | max-width: 100%; | ||
display: block; | |||
overflow-x: auto; | overflow-x: auto; | ||
border-collapse: collapse; | |||
} | } | ||
/* Infobox | /* Infobox styling */ | ||
.infobox { | .infobox { | ||
float: | float: none; | ||
width: | width: 100%; | ||
max-width: 100%; | max-width: 100%; | ||
margin: 0 | margin: 1em 0; | ||
padding: 10px; | |||
border: 1px solid #aaa; | border: 1px solid #aaa; | ||
background: #f9f9f9 | background-color: #f9f9f9; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
font-size: 1rem; | |||
} | } | ||
/* | /* Infobox headers */ | ||
.infobox th { | |||
text-align: left; | |||
font-weight: bold; | |||
} | |||
/* Sidebar cleanup */ | |||
#mw-panel, | |||
.vector-sidebar, | |||
.vector-toc { | |||
width: 100%; | |||
font-size: 1rem; | |||
} | |||
/* Navigation links */ | |||
a { | |||
word-break: break-word; | |||
} | |||
/* Code blocks */ | |||
pre, | |||
code { | |||
overflow-x: auto; | |||
max-width: 100%; | |||
font-size: 0.95rem; | |||
} | |||
/* Category links */ | |||
.catlinks { | |||
font-size: 0.95rem; | |||
} | |||
/* Search bar */ | |||
input[type="search"] { | |||
} | width: 100%; | ||
font-size: 1rem; | |||
box-sizing: border-box; | |||
} | |||
/* Buttons */ | |||
button, | |||
input[type="submit"] { | |||
font-size: 1rem; | |||
} | |||
/* Prevent content overflow */ | |||
div, | |||
span, | |||
section { | |||
max-width: 100%; | |||
box-sizing: border-box; | |||
} | } | ||
Revision as of 22:53, 15 May 2026
/* =========================
MOBILE WIKI OPTIMIZATION
========================= */
/* Prevent weird mobile zoom behavior */
html {
-webkit-text-size-adjust: 100%;
}
/* General body styling */
body,
.mw-body,
.vector-body {
font-size: 18px;
line-height: 1.6;
max-width: 100%;
overflow-x: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
/* Paragraphs and lists */
p,
li,
td,
th {
font-size: 1rem;
line-height: 1.6;
}
/* Headings */
h1 {
font-size: 2rem;
line-height: 1.2;
}
h2 {
font-size: 1.6rem;
line-height: 1.3;
}
h3 {
font-size: 1.3rem;
line-height: 1.4;
}
h4 {
font-size: 1.1rem;
}
/* Images */
img {
max-width: 100%;
height: auto;
}
/* Tables */
table {
width: 100%;
max-width: 100%;
display: block;
overflow-x: auto;
border-collapse: collapse;
}
/* Infobox styling */
.infobox {
float: none;
width: 100%;
max-width: 100%;
margin: 1em 0;
padding: 10px;
border: 1px solid #aaa;
background-color: #f9f9f9;
box-sizing: border-box;
font-size: 1rem;
}
/* Infobox headers */
.infobox th {
text-align: left;
font-weight: bold;
}
/* Sidebar cleanup */
#mw-panel,
.vector-sidebar,
.vector-toc {
width: 100%;
font-size: 1rem;
}
/* Navigation links */
a {
word-break: break-word;
}
/* Code blocks */
pre,
code {
overflow-x: auto;
max-width: 100%;
font-size: 0.95rem;
}
/* Category links */
.catlinks {
font-size: 0.95rem;
}
/* Search bar */
input[type="search"] {
width: 100%;
font-size: 1rem;
box-sizing: border-box;
}
/* Buttons */
button,
input[type="submit"] {
font-size: 1rem;
}
/* Prevent content overflow */
div,
span,
section {
max-width: 100%;
box-sizing: border-box;
}