MediaWiki:Common.css - Revision history

Chronically Dave at 20:38, 7 July 2026

2026-07-07T20:38:23Z

← Older revision		Revision as of 16:38, 7 July 2026
Line 183:		Line 183:

	/* Fix: page containers were offset ~137px left and 500px wide. Reset margins		/* Fix: page containers were offset ~137px left and 500px wide. Reset margins
	and width to the viewport. */		and width to the viewport, with a single clean side gutter. */
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
	.mw-page-container,		.mw-page-container,
Line 203:		Line 203:
	}		}

	~~.mw-body,~~		.mw-body-content {
	.mw-body-content,
	~~.mw-parser-output,~~
	~~.mw-body-header,~~
	~~.mw-footer~~ {
	padding-left: 8px !important;		padding-left: 8px !important;
	padding-right: 8px !important;		padding-right: 8px !important;

Chronically Dave at 20:34, 7 July 2026

2026-07-07T20:34:30Z

← Older revision		Revision as of 16:34, 7 July 2026
Line 208:		Line 208:
	.mw-body-header,		.mw-body-header,
	.mw-footer {		.mw-footer {
	padding-left: ~~16px~~ !important;		padding-left: 8px !important;
	padding-right: ~~16px~~ !important;		padding-right: 8px !important;
	box-sizing: border-box !important;		box-sizing: border-box !important;
	}		}
	}		}

Chronically Dave at 20:31, 7 July 2026

2026-07-07T20:31:24Z

← Older revision		Revision as of 16:31, 7 July 2026
Line 182:		Line 182:
	}		}

	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).		/* Fix: page containers were offset ~137px left and 500px wide. Reset margins
	~~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. */		and width to the viewport. */
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
Line 205:		Line 203:
	}		}

	~~/* Side breathing room, applied to the elements that actually hold content */~~
	.mw-body,		.mw-body,
	.mw-body-content,		.mw-body-content,

Chronically Dave at 20:22, 7 July 2026

2026-07-07T20:22:00Z

← Older revision		Revision as of 16:22, 7 July 2026
Line 182:		Line 182:
	}		}

	/* Fix: page containers were offset ~137px left and 500px wide. Reset margins		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).
	and width to the viewport~~, but keep a comfortable side gutter via padding~~. */		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) {		@media screen and (max-width: 720px) {
	.mw-page-container,		.mw-page-container,
Line 197:		Line 199:
	min-width: 0 !important;		min-width: 0 !important;
	box-sizing: border-box !important;		box-sizing: border-box !important;
	}
	~~/* comfortable side gutters on the content, not the header */~~
	~~.mw-page-container-inner,~~
	~~.vector-body {~~
	~~padding-left: 14px !important;~~
	~~padding-right: 14px !important;~~
	}		}
	html, body {		html, body {
	min-width: 0 !important;		min-width: 0 !important;
	overflow-x: clip;		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;
	}		}
	}		}

Chronically Dave at 20:18, 7 July 2026

2026-07-07T20:18:55Z

← Older revision		Revision as of 16:18, 7 July 2026
Line 182:		Line 182:
	}		}

	/* ~~True fix~~: ~~the top-level~~ page containers ~~are~~ offset ~137px ~~to the~~ left and		/* Fix: page containers were offset ~137px left and 500px wide. Reset margins
	~~sized ~~~500px wide. Reset ~~their horizontal margin/~~width~~/padding~~ to the		and width to the viewport, but keep a comfortable side gutter via padding. */
	viewport ~~so the whole layout stops being shoved off-screen~~. */
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
	.mw-page-container,		.mw-page-container,
Line 197:		Line 196:
	max-width: 100% !important;		max-width: 100% !important;
	min-width: 0 !important;		min-width: 0 !important;
	~~padding-left: 0 !important;~~
	~~padding-right: 0 !important;~~
	box-sizing: border-box !important;		box-sizing: border-box !important;
			}
			/* comfortable side gutters on the content, not the header */
			.mw-page-container-inner,
			.vector-body {
			padding-left: 14px !important;
			padding-right: 14px !important;
	}		}
	html, body {		html, body {

Chronically Dave at 20:16, 7 July 2026

2026-07-07T20:16:47Z

← Older revision		Revision as of 16:16, 7 July 2026
Line 182:		Line 182:
	}		}

	/* ~~The .mw~~-~~jump-link accessibility link is positioned off-screen~~ to the left,		/* True fix: the top-level page containers are offset ~137px to the left and
	~~dragging~~ the ~~whole layout with it and forcing horizontal scroll.~~		sized ~500px wide. Reset their horizontal margin/width/padding to the
	~~Pin it properly out of~~ the ~~flow so it~~ stops ~~shifting the page~~. */		viewport so the whole layout stops being shoved off-screen. */
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
	.mw-~~jump~~-~~link~~ {		.mw-page-container,
	~~position~~: ~~absolute~~ !important;		.mw-page-container-inner,
	left: -~~9999px~~ !important;		.vector-header-container,
	~~top~~: -~~9999px~~ !important;		.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;
			padding-left: 0 !important;
			padding-right: 0 !important;
			box-sizing: border-box !important;
	}		}
	html,		html, body {
	body {
	min-width: 0 !important;		min-width: 0 !important;
			overflow-x: clip;
	}		}
	}		}

Chronically Dave at 20:13, 7 July 2026

2026-07-07T20:13:48Z

← Older revision		Revision as of 16:13, 7 July 2026
Line 182:		Line 182:
	}		}

	/* ~~Fix ~137px content overflow on mobile~~. ~~The key~~ is ~~min~~-~~width:0 — Vector's~~		/* The .mw-jump-link accessibility link is positioned off-screen to the left,
	~~containers carry a min-width that max-width alone can't override~~. */		dragging the whole layout with it and forcing horizontal scroll.
			Pin it properly out of the flow so it stops shifting the page. */
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
			.mw-jump-link {
			position: absolute !important;
			left: -9999px !important;
			top: -9999px !important;
			}
	html,		html,
	body,		body {
	~~.mw-page-container,~~
	~~.mw-page-container-inner,~~
	~~.mw-content-container,~~
	~~.mw-content-wrapper,~~
	~~.vector-column-start,~~
	~~.vector-column-end,~~
	~~.mw-body,~~
	~~.mw-body-content,~~
	~~.mw-parser-output~~ {
	min-width: 0 !important;		min-width: 0 !important;
	~~max-width: 100% !important;~~
	}		}
	}		}

Chronically Dave at 20:10, 7 July 2026

2026-07-07T20:10:56Z

← Older revision		Revision as of 16:10, 7 July 2026
Line 182:		Line 182:
	}		}

	/* ~~Force Vector 2022 page containers to fit the viewport~~ on ~~small screens~~.		/* Fix ~137px content overflow on mobile. The key is min-width:0 — Vector's
	~~Fixes ~137px content overflow~~ that ~~pushes the search icon off~~-~~screen~~. */		containers carry a min-width that max-width alone can't override. */
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
			html,
			body,
	.mw-page-container,		.mw-page-container,
	.mw-page-container-inner,		.mw-page-container-inner,
	.mw-content-container,		.mw-content-container,
			.mw-content-wrapper,
	.vector-column-start,		.vector-column-start,
	.vector-column-end,		.vector-column-end,
	.mw-content~~-wrapper~~,		.mw-body,
	.mw-~~body~~ {		.mw-body-content,
			.mw-parser-output {
			min-width: 0 !important;
	max-width: 100% !important;		max-width: 100% !important;
	~~width: auto !important;~~
	}
	~~body {~~
	~~min-width: 0 !important;~~
	}		}
	}		}

Chronically Dave at 20:07, 7 July 2026

2026-07-07T20:07:03Z

← Older revision		Revision as of 16:07, 7 July 2026
Line 182:		Line 182:
	}		}

	/* ~~Let the~~ Vector 2022 ~~header and its flex children shrink~~ to fit ~~narrow~~		/* Force Vector 2022 page containers to fit the viewport on small screens.
	~~screens, so~~ the search icon ~~stays on~~-screen ~~instead of overflowing~~. */		Fixes ~137px content overflow that pushes the search icon off-screen. */
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
	.vector-~~header~~,		.mw-page-container,
	.vector-~~header~~-~~container~~ {		.mw-page-container-inner,
	~~min~~-width: 0;		.mw-content-container,
			.vector-column-start,
			.vector-column-end,
			.mw-content-wrapper,
			.mw-body {
			max-width: 100% !important;
			width: auto !important;
	}		}
	~~.vector-header-start,~~		body {
	~~.vector-header-end,~~		min-width: 0 !important;
	~~.vector-search-box,~~
	~~.vector-typeahead-search-container,~~
	~~.mw-logo~~ {
	min-width: 0;
	~~flex-shrink: 1~~;
	}		}
	}		}

Chronically Dave at 19:52, 7 July 2026

2026-07-07T19:52:07Z

← Older revision		Revision as of 15:52, 7 July 2026
Line 182:		Line 182:
	}		}

	/* ~~Clip phantom few-px horizontal overflow on mobile.~~		/* Let the Vector 2022 header and its flex children shrink to fit narrow
	~~Uses overflow-x: clip (not hidden)~~ so ~~it does NOT create a scroll~~		screens, so the search icon stays on-screen instead of overflowing. */
	~~container —~~ the ~~sticky header and~~ search ~~box keep working~~. */
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
	.mw-~~page~~-container {		.vector-header,
	~~overflow~~-x: ~~clip~~;		.vector-header-container {
			min-width: 0;
			}
			.vector-header-start,
			.vector-header-end,
			.vector-search-box,
			.vector-typeahead-search-container,
			.mw-logo {
			min-width: 0;
			flex-shrink: 1;
	}		}
	}		}