Improve layout on mobile devices and tablets

1 files changed, 56 insertions, 1 deletions

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 6d37c8f..2057c4d 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -31,4 +31,59 @@ footer ul {
   color: #a94442;
   background-color: #f2dede;
   border-color: #ebccd1;
-}
\ No newline at end of file
+}
+
+.list-inline > .active {
+  font-weight: bold;
+}
+
+.nav_title { 
+  width: 170px;
+}
+
+.nav-md .container.body .col-md-3.left_col {
+  width: 170px;
+}
+
+.nav-md .container.body .right_col {
+  margin-left: 170px;
+}
+
+@media (min-width: 992px) {
+  footer {
+    margin-left: 170px;
+  }
+}
+
+@media (max-width: 991px) {
+  .nav-md .container.body .right_col {
+    padding-right: 0;
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 1100px) {
+  .col-md-2, .col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-md-9,  .col-xs-12, .col-lg-2 {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+@media (min-width: 1635px) {
+  .col-xl-2,{
+    float: left;
+  }
+  .col-xl-2 {
+    width: 16.66666667%;
+  }
+}
+
+.device-list-small{
+  display: none;
+}
+
+@media (max-width: 991px) {
+  .device-list-small{
+      display: inline;
+  }
+}