Fix css for firefox android and other mobile.

2 files changed, 17 insertions, 15 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 19a64a2..8ef0b4d 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -101,10 +101,26 @@ td {
   padding-top: 20px;
 }
 
-.title{
+.title {
   font-size: 3.5em;
 }
 
+@media only screen and (max-device-width: 480px) {
+  /* firefox */
+  @supports (-moz-appearance: none) {
+    .title {
+      font-size: 1.8em !important;
+    }
+  }
+
+  /* other */
+  @supports (not (-moz-appearance: none)) {
+    .title {
+      font-size: 2.0em !important;
+    }
+  }
+}
+
 .line{
   max-width: 100%;
   display: block;
diff --git a/assets/css/skeleton.css b/assets/css/skeleton.css
index 4153536..78a8573 100644
--- a/assets/css/skeleton.css
+++ b/assets/css/skeleton.css
@@ -148,20 +148,6 @@ h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
   h6 { font-size: 1.5rem; }
 }
 
-@media (max-width: 768px) {
-  body {
-    font-size: 3.0em;
-    line-height: 1.2; 
-  }
-
-  h1 { font-size: 6.0rem; }
-  h2 { font-size: 5.0rem; }
-  h3 { font-size: 4.0rem; }
-  h4 { font-size: 4.0rem; }
-  h5 { font-size: 2.4rem; }
-  h6 { font-size: 1.5rem; }
-}
-
 p {
   margin-top: 0; }