fixed style problem on mobile phone

assets/css/index.style.css

@@ -2,7 +2,7 @@
 * @Author: prpr
 * @Date:   2016-01-21 20:07:47
 * @Last Modified by:   prpr
-* @Last Modified time: 2016-02-02 21:44:58
+* @Last Modified time: 2016-02-03 22:06:53
 */
 .home-menu-blur {
     position: absolute;
@@ -89,7 +89,7 @@
 
 .pure-form {
     margin: 10px auto;
-    width: 40%;
+    width: 50%;
 }
 .pure-input {
     margin: 10px 0;
@@ -108,9 +108,15 @@
     float: left;
 }
 #msg {
-    width: 40%;
+    width: 50%;
     margin: 3.5em auto 0;
 }
+.alert {
+    padding: 15px 0;
+}
+.pure-form > .pure-button {
+    height: 40px;
+}
 
 /* Mobile phone */
 @media (max-width: 48em) {
@@ -121,9 +127,15 @@
         width: 100%;
         height: 50%;
     }
-    /*.splash-subhead {
-        font-size: 200%;
-    }*/
+    .pure-form {
+        width: 100%;
+    }
+    #msg {
+        width: 100%;
+    }
+    #login-button {
+        width: 40%;
+    }
 }
 
 
@@ -140,7 +152,7 @@
 
 }
 
-@media (min-width: 78em) {
+@media (min-width: 64em) {
     .splash-head {
         font-size: 300%;
     }

assets/css/style.css

@@ -2,7 +2,7 @@
 * @Author: prpr
 * @Date:   2016-01-21 07:57:38
 * @Last Modified by:   prpr
-* @Last Modified time: 2016-02-03 17:04:36
+* @Last Modified time: 2016-02-03 22:03:53
 */
 
 @font-face {

user/index.php

@@ -128,13 +128,16 @@ if (isset($_SESSION['uname'])) {
 </div>
 <style>
     #preview { display: none; }
-    @media (max-width: 800px) {
+    @media (max-width: 48em) {
         #skinpreview { display: none; }
         #preview { display: inline-block; }
         .pure-u-2-3 { width: 0%; }
         .pure-u-1-3 { width: 100%; }
         .upload-container { width: 70%; height: 50%; margin: 100px auto; }
     }
+    @media (max-width: 20em) {
+        .upload-container { margin: 130px auto; }
+    }
 </style>
 <?php } ?>