add media queries for better responsive UI on mobile devices 333/head
authorLegend Tang <sp3478@gmail.com>
Sat, 28 Feb 2015 15:08:26 +0000 (23:08 +0800)
committerLegend Tang <sp3478@gmail.com>
Sat, 28 Feb 2015 15:08:26 +0000 (23:08 +0800)
This is for modern browsers only

themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css

index e9d9b61aa203eebabf592b0c6cf3b53ad4d10110..b74f2090452c502a58490ba97817c9ef728d9f65 100644 (file)
@@ -1,3 +1,21 @@
 header h3 a, header .brand {
        display:none !important;
 }
+
+@media screen and (max-device-width: 600px) {
+       #maincontent.container {
+               margin-top: 30px;
+       }
+}
+
+@media screen and (max-device-width: 360px) {
+       #maincontent.container {
+               margin-top: 60px;
+       }
+}
+
+@media screen and (max-device-width: 200px) {
+       #maincontent.container {
+               margin-top: 230px;
+       }
+}
\ No newline at end of file