diff options
| -rw-r--r-- | static/styles.css | 26 |
1 files changed, 24 insertions, 2 deletions
diff --git a/static/styles.css b/static/styles.css index 0a0dad9..8ad4369 100644 --- a/static/styles.css +++ b/static/styles.css @@ -8,10 +8,16 @@ #game { display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; gap: .5em; } +@media only screen and (min-width: 700px) { + #game { + grid-template-columns: 1fr 1fr 1fr 1fr; + } +} + .box { border: 1px darkslategrey dotted; border-radius: 4px; @@ -26,6 +32,15 @@ user-select: none; } +.box:last-child { + grid-column-start: 2; +} +@media only screen and (min-width: 700px) { + .box:last-child { + grid-column-start: initial; + } +} + .box:hover { border: 1px darkslategrey solid; background: #f7f1e4; @@ -44,7 +59,7 @@ .answer { grid-column-start: 1; - grid-column-end: 5; + grid-column-end: 4; border: 1px darkslategrey dotted; border-radius: 4px; word-break: break-all; @@ -56,6 +71,13 @@ font-family: Cantarell; } +@media only screen and (min-width: 700px) { + .answer { + grid-column-end: 5; + } +} + + .answerline { font-weight: bold; font-size: large; |