From: Legend Tang <sp3478@gmail.com>
Date: Sat, 28 Feb 2015 15:08:26 +0000 (+0800)
Subject: add media queries for better responsive UI on mobile devices
X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=d6b04483394cd4ccc48c5bf2a1e2235c781b4ee1;p=oweals%2Fluci.git

add media queries for better responsive UI on mobile devices

This is for modern browsers only
---

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css
index e9d9b61aa..b74f20904 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css
@@ -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