Use columns instead of flex for narrow-width options

This commit is contained in:
Jason 2015-03-23 19:39:21 -05:00
parent dac381fb57
commit 02e1255580

View File

@ -80,10 +80,6 @@
#options .aligned { #options .aligned {
display: table-row; display: table-row;
} }
#options .aligned > * {
display: table-cell;
margin: 0.5ex 0 0 0;
}
.code { .code {
height: 10em; height: 10em;
width: 40em; width: 40em;
@ -152,6 +148,13 @@
background: none; background: none;
} }
@media(min-width: 738px) {
#options .aligned > * {
display: table-cell;
margin: 0.5ex 0 0 0;
}
}
@media(max-width:737px) { @media(max-width:737px) {
#header { #header {
height: auto; height: auto;
@ -210,19 +213,14 @@
margin-left: 1em; margin-left: 1em;
} }
#options { #options {
display: flex; -webkit-column-count: 2;
flex-wrap: wrap;
align-items: baseline;
} }
#options .option, #options .option > * { .option {
flex: auto; -webkit-column-break-inside: avoid;
height: 1.8em; }
.option label {
line-height: 20px;
margin: 0; margin: 0;
display: inline-block;
white-space: nowrap;
}
#options .option {
margin-right: 1em;
} }
#sections { #sections {
padding-left: 0; padding-left: 0;