Implement responsive styles for mobile

2017-05-30 20:23:17 +03:00
parent bb769583f2
commit 08c919ded3
2 changed files with 40 additions and 6 deletions
@@ -1,9 +1,43 @@
-td{
-max-width:12vw;
-overflow:hidden;
-word-wrap:break-word;
+html {
+  font-size: 16px;
 }

-#header{
+body {
+  padding: 1.5rem;
+  margin: 0.5rem;
+}
+
+tbody {
+  border: 1px solid #ddd;
+}
+
+@media (min-width: 760px) {
+  body {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 760px) {
+  body {
+    font-size: 1rem;
+  }
+  h1 {
+    font-size: 3rem;
+  }
+  h2 {
+    font-size: 2rem;
+  }
+  .logout-button {
+    margin: 0;
+  }
+}
+
+td {
+  max-width: 12vw;
+  overflow: hidden;
+  word-wrap: break-word;
+}
+
+#header {
    max-width: 100%;
 }