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%;
 }
@@ -4,7 +4,7 @@
 <!DOCTYPE html>
 <html ng-app="infoAdmin">
    <head>
-        <meta charset="utf-8">
+        <meta charset="utf-8" name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
        <title>Infoscreen admin</title>
        <script src="{% static "js/lib/angular.js" %}"></script>
        <script src="{% static "js/lib/ng-file-upload-bower-12.2.11/ng-file-upload-all.js" %}"></script>