Template:Div col/styles.css

From AnOtherWiki, the free encyclopedia written by, for, and about the Otherkin community.
/* Styles for [[Template:Div col]] -- multi-column wrapper for long link lists.
 * The Wikipedia classes "column"/"columns-2" are NOT defined on this wiki, which
 * is why wrapping a list in them appears to do nothing. These are.
 */
.aow-divcol {
	column-gap: 2em;
	margin: 0.3em 0;
}

/* Keep a list item whole rather than breaking it across the column boundary. */
.aow-divcol li {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* The list's own top margin would push the first column down out of line. */
.aow-divcol ul,
.aow-divcol ol {
	margin-top: 0;
}

.aow-divcol-2 { column-count: 2; }
.aow-divcol-3 { column-count: 3; }
.aow-divcol-4 { column-count: 4; }

/* Narrow screens cannot carry columns; collapse to one. */
@media screen and ( max-width: 720px ) {
	.aow-divcol-3,
	.aow-divcol-4 { column-count: 2; }
}

@media screen and ( max-width: 480px ) {
	.aow-divcol-2,
	.aow-divcol-3,
	.aow-divcol-4 { column-count: 1; }
}