Make the web page mobile friendly

7 years ago · 26b46ee7f5
3 changed files with 10 additions and 2 deletions
--- a/static/css/dropzone.css
+++ b/static/css/dropzone.css
@ -31,11 +31,18 @@
    border: 2px solid #FAFBFC;
 }

-#dropzone { width: 400px;
+#dropzone {
+    width: 400px;
    margin-left: auto;
    margin-right: auto;
 }

+@media(max-width: 450px) {
+  #dropzone {
+      width: auto;
+  }
+}
+
 #uploads {
    margin-top: 20px;
 }
--- a/static/css/linx.css
+++ b/static/css/linx.css
@ -287,7 +287,7 @@ body {
 /* Content display {{{ */
 .display-audio,
 .display-file {
-    width: 500px;
+    width: 100%;
 }

 .display-image {
--- a/templates/base.html
+++ b/templates/base.html
@ -3,6 +3,7 @@
 <head>
 	<title>{% block title %}{{ sitename }}{% endblock %}</title>
 	<meta charset='utf-8' content='text/html' http-equiv='content-type'>
+	<meta name='viewport' content='width=device-width, initial-scale=1.0'>
 	<link href='{{ sitepath }}static/css/linx.css' media='screen, projection' rel='stylesheet' type='text/css'>
 	<link href='{{ sitepath }}static/css/hint.css' rel='stylesheet' type='text/css'>
 	<link href='{{ sitepath }}static/images/favicon.gif' rel='icon' type='image/gif'>