Make the sidebar relative/responsive

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;
     }

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;
-}
+}
+
+@media only screen and (max-width: 767px) {
+    .sidebar {
+        width: 96.5%;
+        float: none;
+    }
+
+    .sidebar-content {
+        margin: 0;
+        margin-top: 20px;
+    }
+}