media query 4 small displays

2015-11-16 21:38:06 +01:00
parent 830bb50f14
commit 42b236bb39
3 changed files with 44 additions and 5 deletions
@@ -136,11 +136,14 @@ body {
  background-repeat: no-repeat;
  background-position: left top;
 }
+.clearboth {
+  clear: both;
+}
 a {
  color: #00B7FF;
 }
 .hidden {
-  display: none;
+  display: none !important;
 }
 #navigation {
  height: 70%;
@@ -176,6 +179,20 @@ a {
 #navigation .tile:hover {
  background-color: rgba(255, 255, 255, 0.5);
 }
+@media screen and (max-width: 320px) {
+  #navigation {
+    display: block;
+    text-align: center;
+  }
+  #navigation .tile {
+    display: inline-block;
+    width: 32%;
+  }
+  #navigation .tile .content .icon {
+    height: auto;
+    width: 88%;
+  }
+}
 #controls {
  background-color: rgba(255, 255, 255, 0.25);
  height: 30%;
@@ -68,12 +68,16 @@ body {
  background-position: left top;
 }

+.clearboth {
+  clear: both;
+}
+
 a {
  color: #00B7FF;
 }

 .hidden {
-  display: none;
+  display: none !important;
 }

 #navigation {
@@ -114,6 +118,24 @@ a {
      background-color: @backgroundcolor_element_hover;
    }
  }
+  
+  @media screen and (max-width: 320px) {
+    display: block;
+    text-align: center;
+    
+    .tile {
+      display: inline-block;
+      width: 32%;
+      
+      .content {
+        
+        .icon {
+          height: auto;
+          width: 88%;
+        }
+      }
+    }
+  }
 }

 #controls {