行動版頁面問題修正

mobile/script/goto.js

@@ -20,6 +20,7 @@ $(".feedback-slider1").slick({
   dotsClass: 'slick-dots',
   speed: 1000,
   swipe: true,
+  arrows: false,
 });
 
 $(".banner-slider").slick({

mobile/style.css

@@ -243,6 +243,12 @@ body .arrow:hover {
   width: 85vw;
 }
 
+@media screen and (max-width: 350px) {
+  #content1 .box {
+    width: 90vw;
+  }
+}
+
 #content1 .text {
   position: relative;
 }
@@ -268,6 +274,13 @@ body .arrow:hover {
   }
 }
 
+@media screen and (max-width: 350px) {
+  #content1 .text .text2 {
+    width: 85vw;
+    left: 3vw;
+  }
+}
+
 #content1 .text .text2 h2 {
   line-height: 1.5;
   color: #fff;
@@ -311,6 +324,12 @@ body .arrow:hover {
   }
 }
 
+@media screen and (max-width: 350px) {
+  #content1 img {
+    width: 90vw;
+  }
+}
+
 #service {
   width: 100vw;
   text-align: center;
@@ -519,6 +538,12 @@ body .arrow:hover {
   }
 }
 
+@media screen and (max-width: 350px) {
+  #service-process .process-title .p-text {
+    font-size: 16px;
+  }
+}
+
 @media screen and (max-width: 1024px) {
   #service-process .process-title img {
     margin-top: 80px;
@@ -777,9 +802,17 @@ body .arrow:hover {
   }
 }
 
+@media screen and (max-width: 350px) {
+  #contact-us #contact-form #facebook p {
+    font-size: 16px;
+  }
+}
+
 #contact-us #contact-form #facebook p .sapn-line {
   padding-right: 1vw;
   font-size: 28px;
+  color: #8E8E8E;
+  font-weight: 100;
 }
 
 @media screen and (min-width: 700px) {
@@ -788,6 +821,25 @@ body .arrow:hover {
   }
 }
 
+@media screen and (max-width: 767px) {
+  #contact-us #contact-form #facebook p .sapn-line {
+    padding-right: 5vw;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  #contact-us #contact-form #facebook p .sapn-line {
+    padding-right: 2vw;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  #contact-us #contact-form #facebook p .sapn-line {
+    padding-right: 3vw;
+    font-size: 27px;
+  }
+}
+
 #contact-us #contact-form #facebook img {
   position: absolute;
   left: 30px;
@@ -798,6 +850,12 @@ body .arrow:hover {
           filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
 }
 
+@media screen and (max-width: 350px) {
+  #contact-us #contact-form #facebook img {
+    left: 15px;
+  }
+}
+
 #contact-us #contact-form #facebook:hover {
   background-color: #2a4f91;
   color: #fff;
@@ -862,34 +920,59 @@ body .arrow:hover {
 
 #menu-box {
   top: 60px;
-  height: 45vh;
+  height: 25vh;
   width: 100vw;
   position: fixed;
   z-index: 5;
   overflow: hidden;
 }
 
+@media screen and (max-width: 767px) {
+  #menu-box {
+    height: 45vh;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  #menu-box {
+    height: 50vh;
+  }
+}
+
 #menu-box hr {
-  margin-left: 10px;
-  width: 350px;
+  display: inline-block;
+  margin: 0px auto !important;
+  width: 90vw;
   background: #65584c;
 }
 
 #menu-box #menu-box2 {
   width: 100vw;
-  height: 45vh;
+  height: 25vh;
   background-color: #f4f4f3;
   opacity: 0.9;
   z-index: 7;
   text-align: center;
 }
 
+@media screen and (max-width: 767px) {
+  #menu-box #menu-box2 {
+    height: 45vh;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  #menu-box #menu-box2 {
+    height: 50vh;
+  }
+}
+
 #menu-box #menu-box2 #menu-link {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: (1fr)[3];
       grid-template-columns: repeat(3, 1fr);
-  width: 350px;
+  width: 80vw;
   margin: 0 auto;
 }
 
@@ -904,6 +987,13 @@ body .arrow:hover {
           filter: invert(34%) sepia(7%) saturate(1111%) hue-rotate(347deg) brightness(98%) contrast(88%);
 }
 
+@media screen and (max-width: 350px) {
+  #menu-box #menu-box2 .menu-logo img {
+    width: 35px;
+    height: 35px;
+  }
+}
+
 #menu-box #menu-box2 a {
   display: inline-block;
   text-decoration: none;
@@ -912,6 +1002,12 @@ body .arrow:hover {
   margin-top: 20px;
 }
 
+@media screen and (max-width: 350px) {
+  #menu-box #menu-box2 a {
+    margin-top: 15px;
+  }
+}
+
 #menu-box #menu-box2 .menu-text {
   width: 100vw;
   text-align: center;

mobile/style.scss

@@ -189,6 +189,10 @@ body {
     .box{
         margin: 0 auto;
         width: 85vw;
+        @media screen and(max-width:350px) {
+            width: 90vw;
+            
+        }
     }
     .text {
         position: relative;
@@ -205,6 +209,11 @@ body {
                 width: 80vw;
                 left: 5vw;
             }
+            @media screen and(max-width:350px) {
+                width: 85vw;
+                left: 3vw;
+            }
+            
            
 
             h2 {
@@ -235,6 +244,10 @@ body {
         @media screen and(max-width:$moblie) {
             width: 85vw;
         }
+        @media screen and(max-width:350px) {
+            width: 90vw;
+            
+        }
     }
 }
 #service {
@@ -377,6 +390,9 @@ body {
                 font-size: 18px;
                 width: 40vw;
             }
+            @media screen and(max-width:350px) {
+                font-size: 16px;
+            }
         }
         img {
             
@@ -581,12 +597,31 @@ body {
                     top: 1.8vw;
                     right: 1vw;
                 }
+                @media screen and(max-width:350px) {
+                    font-size: 16px;
+                    
+                }
                 .sapn-line{
                     padding-right: 1vw;
                     font-size: 28px;
+                    color:		#8E8E8E;
+                    font-weight: 100;
                     @media screen and(min-width:700px) {
                         display: none;
                     }
+                    @media screen and(max-width:$moblie) {
+                        padding-right: 5vw;
+                        
+                    }
+                    @media screen and(max-width:400px) {
+                        padding-right: 2vw;
+                        
+                    }
+                    @media screen and(max-width:350px) {
+                        padding-right: 3vw;
+                        font-size: 27px;
+                    }
+                    
                 }
             }
          
@@ -597,6 +632,9 @@ body {
                 width: 32px;
                 height: 32px;
                 filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
+                @media screen and(max-width:350px) {
+                    left: 15px;
+                }
             }
             &:hover {
                 background-color: #2a4f91;
@@ -661,31 +699,45 @@ body {
 
 #menu-box {
     top: 60px;
-    height: 45vh;
+    height: 25vh;
     width: 100vw;
     position: fixed;
     z-index: 5;
     overflow: hidden;
+    @media screen and(max-width:$moblie) {
+        height: 45vh;
+    }
+    @media screen and(max-width:350px) {
+        height: 50vh;
+    }
+
 
 
     hr {
-        margin-left: 10px;
-       width: 350px;
+        display: inline-block;
+        margin: 0px auto !important;
+       width: 90vw;
         background: #65584c;
         
     }
     #menu-box2 {
         width: 100vw;
-        height: 45vh;
+        height: 25vh;
         background-color: #f4f4f3;
         opacity: 0.9;
         z-index: 7;
         text-align: center;
+        @media screen and(max-width:$moblie) {
+            height: 45vh;
+        }
+        @media screen and(max-width:350px) {
+            height: 50vh;
+        }
     
         #menu-link {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
-            width: 350px;
+            width: 80vw;
             margin: 0 auto;
         }
         .menu-logo {
@@ -694,6 +746,10 @@ body {
                 width: 40px;
                 height: 40px;
                 filter: invert(34%) sepia(7%) saturate(1111%) hue-rotate(347deg) brightness(98%) contrast(88%);
+                @media screen and(max-width:350px) {
+                    width: 35px;
+                    height: 35px;
+                }
             }
         }
 
@@ -703,7 +759,9 @@ body {
             color: #65584c;
             font-size: 16px;
             margin-top: 20px;
-
+            @media screen and(max-width:350px) {
+                margin-top: 15px;
+            }
         }
 
         .menu-text {