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 e9d9b61..b74f209 100644 (file)
--- 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;
 }
 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