MediaWiki:Common.css
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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/* ==========================================================================
Responsive / mobile stylesheet for The Bloomington Chronicle
MediaWiki 1.41 · Vector 2022 skin
--------------------------------------------------------------------------
Where to paste this:
MediaWiki:Common.css (recommended — applies to every skin, survives a
skin change, requires the interface-admin right)
or MediaWiki:Vector-2022.css (scopes it to the Vector 2022 skin only)
IMPORTANT: this file only styles the *content area*. It assumes the viewport
meta tag has already been fixed via $wgVectorResponsive = true; (preferred)
or the Common.js fallback. Without that, the media queries below will not
fire on real phones.
========================================================================== */
/* --------------------------------------------------------------------------
1. Overflow guards — safe at every width, no media query needed.
Stops wide media from forcing horizontal scroll on the whole page.
-------------------------------------------------------------------------- */
.mw-parser-output img,
.mw-parser-output video,
.mw-parser-output iframe {
max-width: 100%;
height: auto;
}
/* Long unbroken strings (URLs pasted as text, long file names) shouldn't
blow out the layout. */
.mw-parser-output {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* Preformatted / code blocks scroll internally instead of stretching the page. */
.mw-parser-output pre,
.mw-parser-output .mw-code {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* --------------------------------------------------------------------------
2. Tablet / narrow desktop (<= 850px)
Floated thumbnails and infoboxes go full-width so text isn't squeezed
into a thin column beside them.
-------------------------------------------------------------------------- */
@media screen and (max-width: 850px) {
/* Modern <figure> thumbnails and legacy .thumb floats */
.mw-parser-output figure[class*="mw-halign"],
.mw-parser-output .thumb.tright,
.mw-parser-output .thumb.tleft,
.mw-parser-output .floatright,
.mw-parser-output .floatleft {
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 1em !important;
max-width: 100% !important;
}
.mw-parser-output .thumbinner {
width: auto !important;
max-width: 100% !important;
}
/* Infoboxes (if any pages use them) become a full-width block */
.mw-parser-output .infobox {
float: none !important;
width: auto !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* --------------------------------------------------------------------------
3. Phone (<= 640px)
Readability + tap-target tuning for the dated timeline lists that make up
most of the Chronicle's topic pages.
-------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
/* Slightly larger base text and roomier lines read better on small screens */
.mw-body-content {
font-size: 0.95rem;
line-height: 1.6;
}
/* Pull the giant left indent off lists so entries use the full width.
The timeline is one long nested <ul>, so reclaiming this space matters. */
.mw-parser-output ul,
.mw-parser-output ol {
margin-left: 0;
padding-left: 1.2em;
}
/* Breathing room between timeline entries + comfortable tap spacing for the
clusters of bracketed [copy of report] [BSB coverage] links. */
.mw-parser-output li {
margin-bottom: 0.65em;
}
.mw-parser-output li a {
/* keeps adjacent inline links from becoming one hard-to-tap blob */
padding: 1px 0;
}
/* Year headings (h3) and section headings scale down so they don't wrap
awkwardly, and get a touch more separation from the entries above. */
.mw-parser-output h2 {
font-size: 1.4rem;
}
.mw-parser-output h3 {
font-size: 1.2rem;
margin-top: 1.2em;
}
/* Wikitables: let the table scroll sideways inside its own box instead of
stretching the page. display:block is what makes the overflow scroll
work without a wrapper div (a small tradeoff: the table no longer
auto-fits its container, but it stays fully readable). */
.mw-parser-output table.wikitable {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mw-parser-output table.wikitable th,
.mw-parser-output table.wikitable td {
padding: 4px 6px; /* tighter cells so more columns fit before scroll */
}
/* Galleries: let thumbnails wrap and shrink instead of overflowing */
.mw-parser-output .gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.mw-parser-output .gallerybox {
width: auto !important;
}
/* Caption text under images stays comfortably readable */
.mw-parser-output figcaption,
.mw-parser-output .thumbcaption {
font-size: 0.85rem;
line-height: 1.4;
}
}
/* --------------------------------------------------------------------------
4. Small phone (<= 400px)
Final squeeze for the narrowest common devices.
-------------------------------------------------------------------------- */
@media screen and (max-width: 400px) {
.mw-parser-output ul,
.mw-parser-output ol {
padding-left: 1em;
}
.mw-parser-output h1,
.firstHeading {
font-size: 1.5rem;
line-height: 1.25;
}
}
Then the padding is landing on the wrong element — those two containers must not be where the visible edge actually is. Rather than guess which wrapper to pad, let's put the gutter on the one element we know holds your text: .mw-parser-output (that's the actual content body — it showed up at L−113 R202 in your data, so it's real and present).
Replace the last block with this. It keeps the offset fix exactly as-is (don't want to break what finally worked) and adds the gutter directly to the content:
css/* Fix: page containers were offset ~137px left and 500px wide. Reset margins
and width to the viewport. */
@media screen and (max-width: 720px) {
.mw-page-container,
.mw-page-container-inner,
.vector-header-container,
.vector-header,
.vector-body {
margin-left: 0 !important;
margin-right: 0 !important;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
html, body {
min-width: 0 !important;
overflow-x: clip;
}
/* Side breathing room, applied to the elements that actually hold content */
.mw-body,
.mw-body-content,
.mw-parser-output,
.mw-body-header,
.mw-footer {
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
}
}