Use media queries to give a better layout on small screens

1 files changed, 30 insertions, 12 deletions

diff --git a/style.css b/style.css
index 40e0f5a..e17f42f 100644
--- a/style.css
+++ b/style.css
@@ -212,18 +212,6 @@ div.recentchanges {
 	color: #C00;
 }
 
-.sidebar {
-	width: 20ex;
-	float: right;
-	margin-left: 4px;
-	margin-bottom: 4px;
-	margin-top: -1px;
-	padding: 0ex 2ex;
-	background: white;
-	border: 1px solid black;
-	color: black !important;
-}
-
 hr.poll {
 	height: 10pt;
 	color: white !important;
@@ -549,6 +537,10 @@ h1, h2, h3, h4, h5, h6 {
 
 /* Basic layout */
 
+html {
+    overflow-y: scroll;
+}
+
 html, body {
   height: 100%;
   margin: 0;
@@ -676,6 +668,32 @@ div.sidebar table img {
     margin-left: 180px;
 }
 
+@media screen and (max-width: 480px) {
+#pagebody {
+    clear: left;
+    margin: auto;
+}
+div.pageheader {
+    clear: left;
+    margin: auto;
+}
+div.sidebar {
+    width: 100%;
+
+    margin: auto;
+    background: none;
+
+    padding-top: 10px;
+    padding-left: 0px;
+    padding-right: 10px;
+
+    border: 0px;
+}
+#sidebar-text p {
+  text-align: center;
+}
+}
+
 .pageheader .actions ul {
     border-bottom: 0px
 }