Template:Game/styles.css

From StrategyWiki, the video game walkthrough and strategy guide wiki
< Template:Game
Revision as of 19:04, 15 September 2021 by Prod (talk | contribs) (Created page with ".game-infobox-container { display: grid; grid: "boxart ad" auto "boxart ibox" auto / 1fr 1fr; gap: 10px; width: 100%; } .game-infobox-container > .desktop-300-rig...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
.game-infobox-container {
	display: grid;
	grid: 
		"boxart ad" auto 
		"boxart ibox" auto
		/ 1fr 1fr;
	gap: 10px;
	width: 100%;
}

.game-infobox-container > .desktop-300-right {
	grid-area: ad;
	place-self: start end;
	margin: 0;
	height: 250px;
	width: 300px;
	background: grey;
}

.game-infobox-container > .floatleft {
	grid-area: boxart;
	justify-self: center;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 300px;
}
.game-infobox-container > .floatleft img {
	height: auto;
	width: 100%;
	max-width: 300px !important;
}

.game-infobox-container > .infobox {
	grid-area: ibox;
	align-self: start;
	justify-self: end;
	margin: 0;
	min-width: 300px;
}

@media all and (max-width: 719px) {
	body.skin-timeless .game-infobox-container {
		grid: 
			"ad" auto
			"boxart" auto
			"ibox" auto
			/ auto;
	}

	body.skin-timeless .game-infobox-container > .desktop-300-right {
		justify-self: center;
	}

	body.skin-timeless .game-infobox-container > .floatleft {
		width: 300px;
	}
}

@media all and (min-width: 1176px) {
	.game-infobox-container {
		grid: 
			"boxart ibox ad" auto 
			/ 250px minmax(300px, auto) 300px;
	}

	.game-infobox-container > .infobox {
		width: auto;
		justify-self: stretch;
	}	

	.game-infobox-container > .floatleft {
		width: auto;
	}

	.game-infobox-container > .floatleft img {
		width: auto;
		height: 250px !important;
	}
}