Improve responsive css

4 files changed, 56 insertions, 2 deletions

diff --git a/assets/css/app.css b/assets/css/app.css
index f1a383be..55b7383d 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -722,6 +722,14 @@ nav .active a {
     padding-right: 10px;
     font-size: 0.9em;
 }
+
+@media only screen and (max-width: 640px) {
+
+    .page-header-mobile li {
+        display: block;
+        margin-bottom: 5px;
+    }
+}
 /* board filters */
 .board-filters {
     font-size: 0.95em;
@@ -1370,9 +1378,20 @@ span.task-board-date-overdue {
     line-height: 1.8em;
 }
 
+@media only screen and (max-width: 1024px) {
+    .sidebar {
+        width: 25%;
+    }
+
+    .sidebar-content {
+        margin-left: 30%;
+        width: 70%;
+    }
+}
+
 @media only screen and (max-width: 767px) {
     .sidebar {
-        width: 96.5%;
+        width: 95%;
         float: none;
     }
 
@@ -1439,6 +1458,14 @@ span.task-board-date-overdue {
         height: 18px;
     }
 }
+
+@media only screen and (max-width: 640px) {
+
+    .hide-mobile {
+        display: none;
+    }
+}
+
 .dropdown {
     position: relative;
 }
diff --git a/assets/css/src/header.css b/assets/css/src/header.css
index a9d29c00..2490b125 100644
--- a/assets/css/src/header.css
+++ b/assets/css/src/header.css
@@ -93,3 +93,11 @@ nav .active a {
     padding-right: 10px;
     font-size: 0.9em;
 }
+
+@media only screen and (max-width: 640px) {
+
+    .page-header-mobile li {
+        display: block;
+        margin-bottom: 5px;
+    }
+}
diff --git a/assets/css/src/responsive.css b/assets/css/src/responsive.css
index 78a7a478..f6338ed8 100644
--- a/assets/css/src/responsive.css
+++ b/assets/css/src/responsive.css
@@ -55,3 +55,11 @@
         height: 18px;
     }
 }
+
+@media only screen and (max-width: 640px) {
+
+    .hide-mobile {
+        display: none;
+    }
+}
+
diff --git a/assets/css/src/sidebar.css b/assets/css/src/sidebar.css
index 029c054b..b744689e 100644
--- a/assets/css/src/sidebar.css
+++ b/assets/css/src/sidebar.css
@@ -27,9 +27,20 @@
     line-height: 1.8em;
 }
 
+@media only screen and (max-width: 1024px) {
+    .sidebar {
+        width: 25%;
+    }
+
+    .sidebar-content {
+        margin-left: 30%;
+        width: 70%;
+    }
+}
+
 @media only screen and (max-width: 767px) {
     .sidebar {
-        width: 96.5%;
+        width: 95%;
         float: none;
     }