Finished mobile responsiveness.

resources/jade/header.jade

@@ -3,6 +3,7 @@ html
     title Werkmanrooster
     link(rel="stylesheet", href="/css/skeleton.css", type="text/css")
     link(rel="stylesheet", href="/css/style.css", type="text/css")
+    meta(name='viewport', content='width=device-width, user-scalable=no')
     script(type="text/javascript", src="http://code.jquery.com/jquery-1.11.3.min.js")
     script(type="text/javascript", src="/js/script.js")
     script(type="text/javascript").

resources/jade/schedule.jade

@@ -4,8 +4,8 @@ include header
 include search
 
 - var days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'];
-
+div#wrapper
-div.schedule
+  div.schedule
     ul
       each type in match.json.types
         li

resources/less/mobile.less

@@ -1,4 +1,67 @@
 //mobile.less
-body {
+/* Larger than mobile */
+
+/* Larger than phablet */
+@media (max-width: 550px) {}
+
+/* Larger than tablet */
+@media (max-width: 755px) {
+  #title {
+    font-size: 40px !important;
+  }
+
+  input, button {
+    width: 80% !important;
+  }
+
+  #wrapper {
+    overflow: hidden;
+    overflow-x: auto;
+    width: 100% !important;
+  }
+
+  .schedule {
+    width: 500% !important;
+    padding: 0px;
+
+    div.day {
+      width: 20% !important;
+
+      .hour {
+        width: 100% !important;
+        height: 45px !important;
+        line-height: 45px;
+      }
+    }
+
+    ul {
+      position: absolute;
+      left: 0px;
+      z-index: 1;
+      background: none !important;
+
+      li {
+        height: 50px !important;
+        width: 50px !important;
+        span {
+          height: 50px !important;
+          width: 50px !important;
+          line-height: 50px;
+          font-size: 25px;
+        }
+
+      }
+    }
+  }
 
 }
+
+@media (max-width: 400px) {
+  #title {
+    font-size: 25px !important;
+
+    span {
+      display: none !important;
+    }
+  }
+}

resources/less/style.less

@@ -2,7 +2,7 @@
 @import url('http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400|Oswald');
 
 .big {
-  margin-top: 20%;
+  margin-top: 10%;
 }
 
 .search {
@@ -77,7 +77,7 @@ div.schedule {
 
       &:hover {
         -webkit-transition: 1s ease;
-        width: 200px;
+        width: 200px !important;
       }
 
       &:first-child span {
@@ -109,7 +109,7 @@ div.schedule {
       width: 150px;
       height: 20px;
       border-bottom: solid 1px #DDD;
-      padding: 12px 15px;
+      padding: 12px 0px;
       border-bottom: 1px solid #e1e1e1;
       border-left: 1px solid #FFF;
       position: relative;
@@ -131,6 +131,8 @@ div.schedule {
 
       .teacher {
         text-align: left;
+        position: relative;
+        left: 15px;
       }
 
       .chamber {
@@ -139,6 +141,8 @@ div.schedule {
 
       .course {
         text-align: right;
+        position: relative;
+        right: 15px;
       }
 
       &.changed {