版面調整優化

desktop11/style.css

@@ -572,7 +572,7 @@ body .arrow {
   margin-top: 12px;
   width: 29vw;
   height: 50px;
-  border: 1px solid #000093;
+  border: 1px solid #3B5998;
   text-align: right;
   padding-right: 50px;
   line-height: 50px;

desktop11/style.scss

@@ -504,7 +504,7 @@ body {
                 margin-top: 12px;
                 width: 29vw;
                 height: 50px;
-                border: 1px solid #000093;
+                border: 1px solid #3B5998;
                 text-align: right;
                 padding-right: 50px;
                 line-height: 50px;

mobile/index.html

@@ -71,7 +71,7 @@
         </section>
     </div>
     <div class="btn">
-        <button class="btn-main">預約居家布置諮詢</button>
+        <button class="btn-main" data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300" >預約居家布置諮詢</button>
     </div>
     <div class="container-fluid" style="padding:0;margin:0  ">
         <section id="content1">
@@ -189,7 +189,7 @@
             </div>
         </div> -->
         <div class="btn">
-            <button class="btn-main">預約居家布置諮詢</button>
+            <button class="btn-main" data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300">預約居家布置諮詢</button>
         </div>
     </section>
     <section id="service-process">

mobile/style.css

@@ -12,10 +12,6 @@
   font-weight: 900;
 }
 
-body {
-  height: 6000px;
-}
-
 body .title {
   font-weight: 900;
   padding: 15px;
@@ -36,7 +32,7 @@ body .title {
   }
 }
 
-@media screen and (max-width: 350px) {
+@media screen and (max-width: 400px) {
   body .title {
     font-size: 25px !important;
   }
@@ -202,7 +198,7 @@ body .btn-main:hover {
   }
 }
 
-@media screen and (max-width: 350px) {
+@media screen and (max-width: 400px) {
   #content1 .title {
     font-size: 25px;
   }
@@ -238,7 +234,7 @@ body .btn-main:hover {
   color: #fff;
   text-align-last: left;
   font-size: 20px;
-  letter-spacing: 5px;
+  letter-spacing: 1px;
 }
 
 @media screen and (max-width: 1024px) {
@@ -249,13 +245,13 @@ body .btn-main:hover {
 
 @media screen and (max-width: 767px) {
   #content1 .text .text2 h2 {
-    font-size: 22px;
+    font-size: 1.3rem;
   }
 }
 
-@media screen and (max-width: 350px) {
+@media screen and (max-width: 400px) {
   #content1 .text .text2 h2 {
-    font-size: 1rem;
+    font-size: 1.1rem;
   }
 }
 
@@ -280,7 +276,7 @@ body .btn-main:hover {
   text-align: center;
 }
 
-@media screen and (max-width: 350px) {
+@media screen and (max-width: 400px) {
   #service h1 {
     margin: 50px 0;
     padding: 0;
@@ -306,6 +302,10 @@ body .btn-main:hover {
   }
 }
 
+#service .text .left-box .left-text {
+  font-weight: 900;
+}
+
 @media screen and (max-width: 769px) {
   #service .text .left-box .left-text {
     padding-top: 3vw;
@@ -314,10 +314,17 @@ body .btn-main:hover {
 
 @media screen and (max-width: 576px) {
   #service .text .left-box .left-text {
+    font-size: 0.9rem;
     padding-top: 5vw;
   }
 }
 
+@media screen and (max-width: 400px) {
+  #service .text .left-box .left-text {
+    font-size: 0.7rem;
+  }
+}
+
 @media screen and (max-width: 769px) {
   #service .text .left-box {
     width: 45vw;
@@ -333,7 +340,7 @@ body .btn-main:hover {
   }
 }
 
-@media screen and (max-width: 350px) {
+@media screen and (max-width: 400px) {
   #service .text .left-box {
     padding-top: 5px;
     margin-top: 15px;
@@ -355,7 +362,7 @@ body .btn-main:hover {
   }
 }
 
-@media screen and (max-width: 350px) {
+@media screen and (max-width: 400px) {
   #service h1 {
     font-size: 25px !important;
   }
@@ -659,7 +666,7 @@ body .btn-main:hover {
   margin: 15px auto;
   width: 85vw;
   height: 60px;
-  border: 1px solid #000093;
+  border: 1px solid #3B5998;
   text-align: right;
   background-color: #fff;
   -webkit-transition: 0.3s;

mobile/style.scss

@@ -17,7 +17,7 @@ $Font-color: #fff;
 $toggle: #9c857b;
 $title-color: #4b515e;
 body {
-    height: 6000px;
+   
 
     .title {
         font-weight: 900;
@@ -31,7 +31,7 @@ body {
         @media screen and(max-width:$moblie) {
             font-size: 34px;
         }
-        @media screen and(max-width: 350px) {
+        @media screen and(max-width:400px) {
             font-size:25px!important;
            
         }
@@ -155,7 +155,7 @@ body {
         @media screen and(max-width:$moblie) {
             font-size: 30px;
         }
-        @media screen and(max-width:350px) {
+        @media screen and(max-width:400px) {
             font-size: 25px;
          }
         
@@ -182,15 +182,15 @@ body {
                 color: #fff;
                 text-align-last: left;
                 font-size: 20px;
-                letter-spacing: 5px;
+                letter-spacing: 1px;
                 @media screen and(max-width:$table) {
                     font-size: 32px;
                 }
                 @media screen and(max-width:$moblie) {
-                    font-size: 22px;
+                    font-size: 1.3rem;
                 }
-                @media screen and(max-width: 350px) {
-                    font-size: 1rem;
+                @media screen and(max-width: 400px) {
+                    font-size: 1.1rem;
                 }
             }
         }
@@ -210,7 +210,7 @@ body {
     width: 100vw;
     text-align: center;
     h1{
-        @media screen and(max-width: 350px) {
+        @media screen and(max-width: 400px) {
             margin: 50px 0;
             padding: 0;
             font-size: 25px !important;
@@ -231,13 +231,17 @@ body {
 
         .left-box {
             .left-text{
+                font-weight: 900;
                 @media screen and(max-width: 769px) {
                     padding-top: 3vw;
                 }
                 @media screen and(max-width: 576px) {
-                   
+                   font-size: 0.9rem;
                     padding-top: 5vw;
                 }
+                @media screen and(max-width: 400px) {
+                    font-size: 0.7rem;
+                }
             }
             @media screen and(max-width: 769px) {
                 width: 45vw;
@@ -248,7 +252,7 @@ body {
                 padding-left: 30px;
                 margin-top: 20px;
             }
-            @media screen and(max-width: 350px) {
+            @media screen and(max-width: 400px) {
                padding-top:5px;
                margin-top: 15px;   
             padding-left: 10px;         }
@@ -262,7 +266,7 @@ body {
         @media screen and(max-width:$moblie) {
             font-size: 34px;
         }
-        @media screen and(max-width: 350px) {
+        @media screen and(max-width: 400px) {
             font-size:25px!important;
            
         }
@@ -566,7 +570,7 @@ body {
             margin: 15px auto;
             width: 85vw;
             height: 60px;
-            border: 1px solid #000093;
+            border: 1px solid #3B5998;
             text-align: right;
             // background: url(./img/facebook.png) 10% 50% no-repeat scroll transparent;
             // background-size: 32px 32px;