頁面修正

mobile/index.html

@@ -143,7 +143,6 @@
         <section id="content1">
             <h1 class="title">你有以下這些困擾嗎</h1>
             <div class="box">
-
                 <div class="text">
                     <div class="text2">
                         <h2>裝修公司眾多</h2>
@@ -219,7 +218,7 @@
             <h1 class="title">最嚴謹的服務流程</h1>
             <div class="process-box">
                 <img src="./img/process/box1.webp" alt="">
-                <div style="margin-top: 70px;" class="process-title">
+                <div id="box1-text"  class="process-title">
                     <div class="p-text">填寫裝修需求表單</div>
                     <img src="./img/process/arrowdown.webp" alt="">
                 </div>

mobile/style.css

@@ -68,7 +68,7 @@ body .btn-main:hover {
 @media screen and (max-width: 1024px) {
   body .btn-main {
     font-size: 16px;
-    padding: 20px;
+    padding: 15px;
   }
 }
 
@@ -117,14 +117,24 @@ body .arrow:hover {
 }
 
 #banner-box {
-  height: 45vh;
+  height: 50vh;
   overflow: hidden;
   position: relative;
 }
 
 @media screen and (max-width: 767px) {
   #banner-box {
-    height: 50vh;
+    height: 90vh;
+  }
+}
+
+#banner-box .banner-slider {
+  height: 45vh;
+}
+
+@media screen and (max-width: 767px) {
+  #banner-box .banner-slider {
+    height: 80vh;
   }
 }
 
@@ -146,27 +156,25 @@ body .arrow:hover {
 #banner-box .banner-slider .banner2,
 #banner-box .banner-slider .banner3 {
   width: 100vw;
-  height: 50vh;
-  background-size: contain;
+  height: 45vh;
   background-repeat: no-repeat;
-  background-size: 100vw 70vh;
+  background-size: cover;
+  background-position: center center;
 }
 
 @media screen and (max-width: 767px) {
   #banner-box .banner-slider .banner1,
   #banner-box .banner-slider .banner2,
   #banner-box .banner-slider .banner3 {
-    height: 50vh;
-    background-size: cover;
-    background-position: center center;
+    height: 80vh;
   }
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (min-height: 800px) {
   #banner-box .banner-slider .banner1,
   #banner-box .banner-slider .banner2,
   #banner-box .banner-slider .banner3 {
-    height: 45vh;
+    background-position: 55% 50%;
   }
 }
 
@@ -181,6 +189,14 @@ body .arrow:hover {
   font-size: 72px;
 }
 
+@media screen and (max-width: 767px) {
+  #banner-box .banner-slider .banner1 h1,
+  #banner-box .banner-slider .banner2 h1,
+  #banner-box .banner-slider .banner3 h1 {
+    line-height: 80vh;
+  }
+}
+
 #banner-box .banner-slider .banner1 .img,
 #banner-box .banner-slider .banner2 .img,
 #banner-box .banner-slider .banner3 .img {
@@ -201,10 +217,11 @@ body .arrow:hover {
 
 #content1 {
   margin-top: 100px;
-  text-align: center;
+  width: 100vw;
 }
 
 #content1 .title {
+  text-align: center;
   margin: 30px 0px;
   font-family: "Times New Roman", Times, serif;
 }
@@ -221,6 +238,11 @@ body .arrow:hover {
   }
 }
 
+#content1 .box {
+  margin: 0 auto;
+  width: 85vw;
+}
+
 #content1 .text {
   position: relative;
 }
@@ -228,13 +250,13 @@ body .arrow:hover {
 #content1 .text .text2 {
   position: absolute;
   top: 15vw;
-  left: 20vw;
+  left: 10vw;
   z-index: 1;
 }
 
 @media screen and (max-width: 1024px) {
   #content1 .text .text2 {
-    width: 60vw;
+    width: 65vw;
     height: 30vw;
   }
 }
@@ -242,7 +264,7 @@ body .arrow:hover {
 @media screen and (max-width: 767px) {
   #content1 .text .text2 {
     width: 80vw;
-    left: 10vw;
+    left: 5vw;
   }
 }
 
@@ -252,6 +274,7 @@ body .arrow:hover {
   text-align-last: left;
   font-size: 20px;
   letter-spacing: 1px;
+  font-weight: 900;
 }
 
 @media screen and (max-width: 1024px) {
@@ -274,7 +297,7 @@ body .arrow:hover {
 
 #content1 img {
   margin: 15px auto;
-  width: 70vw;
+  width: 85vw;
   height: 30vh;
   -o-object-fit: cover;
      object-fit: cover;
@@ -411,6 +434,16 @@ body .arrow:hover {
   }
 }
 
+#service-process #box1-text {
+  margin-top: 100px;
+}
+
+@media screen and (max-width: 767px) {
+  #service-process #box1-text {
+    margin-top: 50px;
+  }
+}
+
 #service-process .process-box {
   width: 65vw;
   display: -ms-grid;
@@ -418,6 +451,7 @@ body .arrow:hover {
   margin: 0px auto;
   -ms-grid-columns: (1fr)[2];
       grid-template-columns: repeat(2, 1fr);
+  grid-gap: 3vw;
 }
 
 @media screen and (max-width: 767px) {
@@ -724,12 +758,13 @@ body .arrow:hover {
 
 #contact-us #contact-form #facebook p {
   position: absolute;
+  top: 2vw;
   font-weight: normal;
 }
 
 @media screen and (max-width: 1024px) {
   #contact-us #contact-form #facebook p {
-    top: 1vw;
+    top: 2vw;
     right: 10vw;
     font-size: 20px;
   }
@@ -747,9 +782,9 @@ body .arrow:hover {
   font-size: 28px;
 }
 
-@media screen and (max-width: 767px) {
+@media screen and (min-width: 700px) {
   #contact-us #contact-form #facebook p .sapn-line {
-    right: 2vw;
+    display: none;
   }
 }
 

mobile/style.scss

@@ -59,7 +59,7 @@ body {
         }
         @media screen and(max-width:$table) {
             font-size: 16px;
-            padding: 20px;
+            padding: 15px;
         }
     }
     .arrow {
@@ -104,13 +104,18 @@ body {
     }
 }
 #banner-box {
-    height: 45vh;
+    height: 50vh;
     overflow: hidden;
     position:relative;
     @media screen and(max-width:$moblie) {
-        height: 50vh;
+        height: 90vh;
     }
     .banner-slider {
+        height: 45vh;
+        @media screen and(max-width:$moblie) {
+            height: 80vh;
+        }
+
         .slick-dots {
             margin-bottom: 50px;
             ::before{
@@ -125,20 +130,20 @@ body {
         .banner2,
         .banner3 {
             width: 100vw;
-            height: 50vh;
-            background-size: contain;
+            height: 45vh;
+            // background-size: contain;
             background-repeat: no-repeat;
-            background-size: 100vw 70vh;
+            background-size: cover;
+            background-position: center center;
           
             @media screen and(max-width:$moblie) {
-                height: 50vh;
-                background-size: cover;
-                background-position:center center;
+                height: 80vh; 
             }
 
-            @media screen and(max-width:$table) {
-                height: 45vh;
+            @media screen and(min-height:800px) {
+                background-position:55% 50% ;
             }
+
             h1 {
                 line-height: 40vh;
                 text-align: center;
@@ -146,6 +151,9 @@ body {
                 color: #fff;
                 font-family: 追奇手寫體;
                 font-size: 72px;
+                @media screen and(max-width:$moblie) {
+                    line-height: 80vh;
+                }
             }
             .img {
                 width: 20px;
@@ -165,8 +173,9 @@ body {
 
 #content1 {
     margin-top: 100px;
-    text-align: center;
+    width: 100vw;
     .title {
+        text-align: center;
         margin: 30px 0px;
         font-family: "Times New Roman", Times, serif;
         @media screen and(max-width:$moblie) {
@@ -177,20 +186,24 @@ body {
          }
         
     }
+    .box{
+        margin: 0 auto;
+        width: 85vw;
+    }
     .text {
         position: relative;
         .text2 {
             position: absolute;
             top: 15vw;
-            left: 20vw;
+            left: 10vw;
             z-index: 1;
             @media screen and(max-width:$table) {
-                width: 60vw;
+                width: 65vw;
                 height: 30vw;
             }
             @media screen and(max-width:$moblie) {
                 width: 80vw;
-                left: 10vw;
+                left: 5vw;
             }
            
 
@@ -200,6 +213,7 @@ body {
                 text-align-last: left;
                 font-size: 20px;
                 letter-spacing: 1px;
+                font-weight: 900;
                 @media screen and(max-width:$table) {
                     font-size: 32px;
                 }
@@ -214,7 +228,7 @@ body {
     }
     img {
         margin: 15px auto;
-        width: 70vw;
+        width: 85vw;
         height: 30vh;
         object-fit: cover;
         filter: brightness(70%);
@@ -309,14 +323,22 @@ body {
             margin-bottom: 30px;
         }
     }
+    #box1-text{
+        margin-top: 100px;
+        @media screen and(max-width:$moblie) {
+            margin-top: 50px;
+        }
+    }
     .process-box {
         width: 65vw;
         display: grid;
         margin: 0px auto;
         grid-template-columns: repeat(2, 1fr);
+        grid-gap: 3vw;
         @media screen and(max-width:$moblie) {
             width: 75vw;
         }
+
     }
     img {
         width: 128px;
@@ -547,10 +569,10 @@ body {
             position: relative;
             p {
                 position: absolute;
-           
+                top: 2vw;
                 font-weight: normal;
                 @media screen and(max-width:$table) {
-                    top: 1vw;
+                    top: 2vw;
                     right: 10vw;
                     font-size: 20px;
                 }
@@ -562,9 +584,8 @@ body {
                 .sapn-line{
                     padding-right: 1vw;
                     font-size: 28px;
-                    @media screen and(max-width:$moblie) {
-                        
-                        right: 2vw;
+                    @media screen and(min-width:700px) {
+                        display: none;
                     }
                 }
             }