Make the sidebar relative/responsive

3 files changed, 35 insertions, 50 deletions

diff --git a/assets/css/app.css b/assets/css/app.css
index d30ec528..5e65f997 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1904,20 +1904,16 @@ a.task-board-nobody {
     font-size: 1.1em;
 }/* sidebar */
 .sidebar-container {
-    margin-top: 30px;
-    position: relative;
+    clear: both;
 }
 
 .sidebar-content {
-    margin-left: 280px;
+    margin-left: 23%;
 }
 
 .sidebar {
-    position: absolute;
-    left: 0px;
-    top: 0;
-    max-width: 250px;
-    min-width: 200px;
+    width: 20%;
+    float: left;
     padding: 10px;
     padding-top: 0;
     border: 1px solid #ddd;
@@ -1929,7 +1925,20 @@ a.task-board-nobody {
     list-style-type: square;
     margin-left: 30px;
     line-height: 1.8em;
-}/* responsive design */
+}
+
+@media only screen and (max-width: 767px) {
+    .sidebar {
+        width: 96.5%;
+        float: none;
+    }
+
+    .sidebar-content {
+        margin: 0;
+        margin-top: 20px;
+    }
+}
+/* responsive design */
 @media only screen and (max-width: 1024px) {
 
     li.hide-tablet,
@@ -1941,10 +1950,6 @@ a.task-board-nobody {
         font-size: 0.85em;
     }
 
-    .sidebar-content {
-        margin-left: 255px;
-    }
-
     .form-tab {
         max-width: 404px;
     }
@@ -1974,22 +1979,10 @@ a.task-board-nobody {
 
 @media only screen and (max-width: 1024px) and (orientation: landscape) {
 
-    body {
-        font-size: 0.7em;
-    }
-
     header {
         padding-bottom: 4px;
     }
 
-    .sidebar {
-        max-width: 220px;
-    }
-
-    .sidebar-content {
-        margin-left: 225px;
-    }
-
     div.chosen-container {
         font-size: 0.9em;
     }
diff --git a/assets/css/src/responsive.css b/assets/css/src/responsive.css
index f319c341..78a7a478 100644
--- a/assets/css/src/responsive.css
+++ b/assets/css/src/responsive.css
@@ -10,10 +10,6 @@
         font-size: 0.85em;
     }
 
-    .sidebar-content {
-        margin-left: 255px;
-    }
-
     .form-tab {
         max-width: 404px;
     }
@@ -43,22 +39,10 @@
 
 @media only screen and (max-width: 1024px) and (orientation: landscape) {
 
-    body {
-        font-size: 0.7em;
-    }
-
     header {
         padding-bottom: 4px;
     }
 
-    .sidebar {
-        max-width: 220px;
-    }
-
-    .sidebar-content {
-        margin-left: 225px;
-    }
-
     div.chosen-container {
         font-size: 0.9em;
     }
diff --git a/assets/css/src/sidebar.css b/assets/css/src/sidebar.css
index 73a99008..5413f7f6 100644
--- a/assets/css/src/sidebar.css
+++ b/assets/css/src/sidebar.css
@@ -1,19 +1,15 @@
 /* sidebar */
 .sidebar-container {
-    margin-top: 30px;
-    position: relative;
+    clear: both;
 }
 
 .sidebar-content {
-    margin-left: 280px;
+    margin-left: 23%;
 }
 
 .sidebar {
-    position: absolute;
-    left: 0px;
-    top: 0;
-    max-width: 250px;
-    min-width: 200px;
+    width: 20%;
+    float: left;
     padding: 10px;
     padding-top: 0;
     border: 1px solid #ddd;
@@ -25,4 +21,16 @@
     list-style-type: square;
     margin-left: 30px;
     line-height: 1.8em;
-}
\ No newline at end of file
+}
+
+@media only screen and (max-width: 767px) {
+    .sidebar {
+        width: 96.5%;
+        float: none;
+    }
+
+    .sidebar-content {
+        margin: 0;
+        margin-top: 20px;
+    }
+}