#samp-ctrl { display: flex; padding: dist(-2); flex-direction: row; @include media($phone) { flex-direction: column; } justify-content: center; align-items: stretch; > div { margin: dist(-2) dist(-1); } label { line-height: 1.8; font-weight: bold; } input,select { width: 6em; @include media($phone) { width: 100%; } } #tile-cfg input { width: 3em; } } .Box.chartbox { display: flex; flex-direction: row; @include media($phone) { flex-direction: column; } .stats { flex: 0 1; position: relative; @include media($phone) { table { margin: 0 auto; } // center the table td,th { width: 50%; } } th,td { @include nowrap; } th sub { font-weight: normal;} td { min-width: 100px; } td:after { font-size: 90%; padding-left: .5em; } //#stat-count #stat-f-s:after {content: "Hz"} #stat-i-peak:after {content: "mA"} #stat-i-rms:after {content: "mA"} padding-bottom: 50px; // auto reload box .ar { position: absolute; bottom:dist(-2); width:100%; text-align: center; input[type=number] { width: 4em; } input[type=button] { margin-left: dist(-2); } } } }