Responsive design for mobile (finally)

2020-10-05 12:49:26 +02:00
parent 93b81493c0
commit e2eacbc051
10 changed files with 249 additions and 102 deletions
@@ -1,5 +1,10 @@
 html {
-  margin: 100px 50px;
+  margin: 35px 5px;
+}
+@media (min-width: 640px) {
+  html {
+    margin: 100px 50px;
+  }
 }
 body {
  margin: 0 auto;
@@ -27,16 +32,23 @@ h1 {
  margin-top: 2em;
 }
 .resultsMenu .menuItem {
+  font-size: 0.8em;
  display: inline-block;
-  margin: 1em;
-  width: 8em;
+  width: 7em;
  height: 7em;
  color: #fff;
-  border: 2px solid #fff;
-  border-radius: 0.5em;
  cursor: pointer;
  text-decoration: none;
 }
+@media (min-width: 640px) {
+  .resultsMenu .menuItem {
+    font-size: 1em;
+    margin: 1em;
+    width: 8em;
+    border: 2px solid #fff;
+    border-radius: 0.5em;
+  }
+}
 .resultsMenu .menuItem svg {
  fill: #fff;
 }