Template:Flex columns/styles.css

From Wiki.Agency
< Template:Flex columns
Revision as of 18:44, 9 September 2018 by Dreamy Jazz (talk) (when the screen is less than 383px, the flex columns are going beyond their allowed space. Also add code so that flex columns stops at 720px completely)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
.flex-columns-container {
	clear:both;
	width:100%;
	display: flex;
	flex-wrap: wrap;
}
.flex-columns-container > .flex-columns-column {
	float: left;
	width: 50%;
	min-width: 360px;
	padding: 0 0.5em;
	box-sizing: border-box;
	flex: 1;
	display: flex;
	flex-direction: column;
}
@media screen and (max-width: 393px) {
	.flex-columns-container > .flex-columns-column {
		min-width: 0;
	}
}
.flex-columns-container > .flex-columns-column:first-child {
	padding-left: 0;
}
.flex-columns-container > .flex-columns-column:last-child {
	padding-right: 0;
}
@media screen and (max-width: 720px) {
	.flex-columns-container > .flex-columns-column {
		padding: 0;
		width: 100%;
	}
	.flex-columns-container {
		display:block;
	}
}
.flex-columns-container > .flex-columns-column > div {
	flex: 1 0 auto;
}
.flex-columns-container > .flex-columns-column > div.flex-columns-noflex {
	flex: 0;
}