MediaWiki:Gadget-responsiveContentBaseTimeless.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.

/*
 * Need to override Timeless being a little aggressive with tables in
 * the 720-850 range
 */	
@media (min-width: 720px) and (max-width: 850px) {
	table.ambox:not(.mbox-small-left),
	table.cmbox,
	table.imbox,
	table.ombox:not(.mbox-small),
	table.tmbox:not(.mbox-small) {
		width: 80%;
	}
}

@media only screen and ( max-width: 550px ) {
	/* !important to ignore inline styles */
	/* .mw-body-content to increase specificity */
	.mw-body-content table {
		float: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.mw-body-content table {
		overflow: auto;
		overflow-y: hidden;
		overflow-x: auto;
		max-width: 100% !important;
	}

	.mw-body-content .thumb,
	.mw-body-content figure[typeof~='mw:File/Thumb'],
	.mw-body-content figure[typeof~='mw:File/Frame'] {
		float: none;
		clear: none;
		margin: 0.5em auto;
	}

	.mw-body-content .thumbinner {
		margin: 0 auto;
		max-width: 100%;
		box-sizing: border-box;
		border: 0;
		background-color: transparent;
	}

	.mw-body-content .thumbinner .thumbimage {
		max-width: 100%;
		height: auto;
		object-fit: contain;
	}

	.mw-body-content .thumbimage {
		border: 0;
		background-color: transparent;
	}

	.mw-body-content figure[typeof~='mw:File/Thumb'],
	.mw-body-content figure[typeof~='mw:File/Frame'],
	.mw-body-content figure[typeof~='mw:File/Thumb'] > figcaption,
	.mw-body-content figure[typeof~='mw:File/Frame'] > figcaption {
		border: 0;
		background-color: transparent;
		padding: 0;
	}

	.mw-body-content figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
	.mw-body-content figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
		margin: 0 auto 0.5em auto;
		max-width: 100% !important;
		height: auto;
		object-fit: contain;
		box-sizing: border-box;
		border: 0;
		background-color: transparent;
	}

	.mw-body-content .thumbcaption > .magnify {
		display: none;
	}

	.mw-body-content figure[typeof~='mw:File/Thumb'] > figcaption::before,
	.mw-body-content figure[typeof~='mw:File/Thumb'] > .mw-file-description::after,
	.mw-body-content figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
		content: none;
	}

	/* amboxes become normal blocks */
	.mw-body-content table.ambox > tbody,
	.mw-body-content table.ambox > tbody > tr {
		display: block;
	}

	/* of which we hide some parts by default to shorten them */
	.mw-body-content .ambox .mbox-image,
	.mw-body-content .ambox .mbox-text .hide-when-compact {
		display: none;
		cursor: pointer;
	}

	.mw-body-content table.ambox {
		font-size: 80%;
		background-color: transparent;
		margin-left: 0 !important;
		padding: 0 !important;
		border-width: 0 0 0 3px;
	}

	.mw-body-content .ambox .mbox-text-span {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		display: block;
	}

	/* But we can flip a class to undo the hiding */
	.ambox.mbox-expand .mbox-text-span {
		text-overflow: initial;
		white-space: normal;
		overflow: auto;
	}

	.ambox.mbox-expand .mbox-text .hide-when-compact {
		display: inline;
	}
	
	#firstHeading .mw-editsection,
	#coordinates {
		display: none;
	}
	
	.mw-body-content .infobox,
	.mw-body-content .navbox,
	.mw-body-content .navbox > .navbox-inner {
		width: 100% !important;
		box-sizing: border-box;
		display: table;
	}

	.mw-body-content .image > img {
		max-width: 100%;
		min-width: 20px;
		height: auto;
		object-fit: contain;
	}

	.mw-body-content {
		word-wrap: break-word;
	}
}

@media only screen and ( max-width: 550px ) and ( -webkit-min-device-pixel-ratio: 1.5 ),
	only screen and ( max-width: 550px ) and ( min-resolution: 1.5dppx ) {
	@supports ( object-fit: contain ) {
		.mw-body-content div.thumbinner,
		.mw-body-content figure[typeof~='mw:File/Thumb'],
		.mw-body-content figure[typeof~='mw:File/Frame'] {
			width: 100% !important;
			padding: 0 !important;
		}

		.mw-body-content div.thumbinner .thumbimage,
		.mw-body-content figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
		.mw-body-content figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
			width: 100%;
			object-fit: contain;
			max-height: 60vh;
		}
	}
}