diff --git a/index.css b/index.css index dc581b3..a486ede 100644 --- a/index.css +++ b/index.css @@ -43,15 +43,17 @@ body.wide { } .cell { + display: inline-flex; + justify-content: center; + align-items: center; + padding: 0.5em; - display: inline-block; width: 1em; height: 1em; font-family: monospace; font-size: xx-large; border: 1px solid #bbb; vertical-align: top; - text-align: center; } #keyboard { @@ -94,3 +96,27 @@ body.wide { background-color: #1f2937; color: #fff; } + +@media (max-width: 600px) { + #main { + gap: 10px; + } + .cell { + box-sizing: border-box; + padding: 0.5em; + + width: 9vw; + height: 9vw; + } + .key { + box-sizing: border-box; + width: 7.6vw; + height: 7.6vw; + font-size: x-large; + } + + #backspace, #enter { + width: 15.2vw; + height: 7.6vw; + } +}