Template:Infobox/styles.css: Difference between revisions

@@ Line 66: / Line 66: @@
 	/* @noflip */
 	border-right: 1px solid #a2a9b1;
+}
+/** MOBILE **/
+/*@media (min-width: 720px) {*/
+/*	.content .infobox {*/
+/*		margin: 0.5em 0 1em 35px !important;*/
+/*		max-width: 340px !important;*/
+/*		width: auto !important;*/
+/*		float: right !important;*/
+/*		clear: right !important;*/
+/*	}*/
+/*}*/
+@media (max-width: 720px) {
+	.content .infobox {
+		font-size: 90%;
+		position: relative;
+		border: 1px solid #eaecf0;
+		background-color: #f8f9fa;
+		display: flex;
+		flex: 1 1 100%;
+		flex-flow: column nowrap;
+	}
+	.infobox td, .infobox th {
+		vertical-align: top;
+		text-align: left;
+	}
+	.content .infobox th,
+	.content .infobox td {
+		vertical-align: top;
+		border: 0;
+		border-bottom: 1px solid #eaecf0;
+		padding: 7px 10px;
+	}
+	.content .infobox > tbody,
+	.content .infobox > caption {
+		display: flex;
+		flex-flow: column nowrap;
+	}
+	.content .infobox caption {
+		padding: 10px 10px 0;
+		text-align: center;
+	}
+	.infobox caption {
+		font-size: 125%;
+		font-weight: bold;
+		text-align: center;
+	}
+	.content .infobox tbody > tr > td,
+	.content .infobox tbody > tr > th {
+		flex: 1 0;
+	}
+	.content .infobox td:only-child,
+	.content .infobox th:only-child {
+		display: block;
+		width: 100%;
+		box-sizing: border-box;
+	}
+	.content .infobox > tbody > tr {
+		min-width: 100%;
+		display: flex;
+		flex-flow: row nowrap;
+	}
 }