Use columns instead of flex for narrow-width options
This commit is contained in:
		
							parent
							
								
									dac381fb57
								
							
						
					
					
						commit
						02e1255580
					
				
							
								
								
									
										28
									
								
								edit.html
									
									
									
									
									
								
							
							
						
						
									
										28
									
								
								edit.html
									
									
									
									
									
								
							| 
						 | 
					@ -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;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue
	
	Block a user