修正輪播問題

mobile/index.html

@@ -29,13 +29,15 @@
         <img id="menu-btn1" src="./img/logo/menu.webp" alt="">
     </nav>
 
-    <div id="menu-box">
-
+    <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
         <div id="menu-box2">
             <div id="menu1" class="menu-text"><a href="#!">首頁</a>
-                <div class="menu-text"><a class="link" data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300">我有裝修需求</a></div>
-                <div class="menu-text"><a  class="link" data-gt-target="#feedback" data-gt-duration="500" data-gt-offset="0">屋主都說好</a></div>
-                <div class="menu-text"><a class="link" data-gt-target="#service-process" data-gt-duration="500" data-gt-offset="0">服務流程</a></div>
+                <div class="menu-text"><a class="link" data-gt-target="#contact-us" data-gt-duration="800"
+                        data-gt-offset="-300">我有裝修需求</a></div>
+                <div class="menu-text"><a class="link" data-gt-target="#feedback" data-gt-duration="500"
+                        data-gt-offset="0">屋主都說好</a></div>
+                <div class="menu-text"><a class="link" data-gt-target="#service-process" data-gt-duration="500"
+                        data-gt-offset="0">服務流程</a></div>
             </div>
             <hr>
             <div id="menu-link">
@@ -47,33 +49,35 @@
         </div>
 
     </div>
+    <div class="container-fluid" style="padding:0;margin:0 ">
 
-    <section id="banner-box">
-        <div class="banner-slider">
-            <div class="banner1">
+        <section id="banner-box">
+            <div class="banner-slider">
+                <div class="banner1">
 
-                <h1>北歐風</h1>
-            </div>
-            <div class="banner2">
+                    <h1>北歐風</h1>
+                </div>
+                <div class="banner2">
 
-                <h1>次代風</h1>
-            </div>
-            <div class="banner3">
+                    <h1>次代風</h1>
+                </div>
+                <div class="banner3">
 
-                <h1>美式風</h1>
+                    <h1>美式風</h1>
+                </div>
             </div>
-        </div>
 
 
-    </section>
+        </section>
+    </div>
     <div class="btn">
         <button class="btn-main">預約居家布置諮詢</button>
     </div>
-    <div class="container-fluid">
+    <div class="container-fluid" style="padding:0;margin:0  ">
         <section id="content1">
             <h1 class="title">你有以下這些下困擾嗎</h1>
             <div class="box">
-    
+
                 <div class="text">
                     <div class="text2">
                         <h2>裝修公司眾多</h2>
@@ -95,8 +99,8 @@
                     </div>
                     <img src="./img/content/03.webp" alt="">
                 </div>
-    
-    
+
+
         </section>
 
     </div>
@@ -142,7 +146,7 @@
                     <div class="left-box ">
                         <img class="icon  " src="./img/process/icon2.webp" alt="">
                         <div class="left-text">
-                            <div class="text-font  "><span style="font-size: 20px;" >13</span>年經驗安心把關</div>
+                            <div class="text-font  "><span style="font-size: 20px;">13</span>年經驗安心把關</div>
                             <div class="text-font">不懂預算行情</div>
                             <div class="text-font">也不用擔心受騙</div>
                         </div>
@@ -245,31 +249,38 @@
             <div class="box">
                 <img src="./img/feedback/feedback01.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
-                <a href="https://hhh.com.tw/video-post.php?id=2905"><img  class="play" src="./img/play (1).png" alt=""></a>
-            </div>            <div class="box">
+                <a href="https://hhh.com.tw/video-post.php?id=2905"><img class="play" src="./img/play (1).png"
+                        alt=""></a>
+            </div>
+            <div class="box">
                 <img src="./img/feedback/feedback02.webp" alt="">
                 <p>緞帶般曲線 譜出家的律動與甜蜜</p>
-                <a href="https://hhh.com.tw/video-post.php?id=3782"><img  class="play" src="./img/play (1).png" alt=""></a>
+                <a href="https://hhh.com.tw/video-post.php?id=3782"><img class="play" src="./img/play (1).png"
+                        alt=""></a>
             </div>
             <div class="box">
                 <img src="./img/feedback/feedback03.webp" alt="">
                 <p>系統設計的變革 前衛科技宅</p>
-                <a href="https://hhh.com.tw/video-post.php?id=3549"><img  class="play" src="./img/play (1).png" alt=""></a>
+                <a href="https://hhh.com.tw/video-post.php?id=3549"><img class="play" src="./img/play (1).png"
+                        alt=""></a>
             </div>
             <div class="box">
                 <img src="./img/feedback/feedback04.webp" alt="">
                 <p>用系統設計 實現歐洲皇室城堡夢</p>
-                <a href="https://hhh.com.tw/video-post.php?id=2985"><img  class="play" src="./img/play (1).png" alt=""></a>
+                <a href="https://hhh.com.tw/video-post.php?id=2985"><img class="play" src="./img/play (1).png"
+                        alt=""></a>
             </div>
             <div class="box">
                 <img src="./img/feedback/feedback05.webp" alt="">
                 <p>不良格局變身 3米6日光鄉村宅</p>
-                <a href="https://hhh.com.tw/video-post.php?id=2122"><img  class="play" src="./img/play (1).png" alt=""></a>
+                <a href="https://hhh.com.tw/video-post.php?id=2122"><img class="play" src="./img/play (1).png"
+                        alt=""></a>
             </div>
             <div class="box">
                 <img src="./img/feedback/feedback06.webp" alt="">
                 <p>雙拼豪宅古典、日式一次擁有</p>
-                <a href="https://hhh.com.tw/video-post.php?id=3847"><img  class="play" src="./img/play (1).png" alt=""></a>
+                <a href="https://hhh.com.tw/video-post.php?id=3847"><img class="play" src="./img/play (1).png"
+                        alt=""></a>
             </div>
 
         </div>
@@ -283,7 +294,8 @@
 
         </div>
         <div id="form-text">
-            <p>請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone" style="color:  #ee751b;">0800-336-086</span></p>
+            <p>請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone"
+                    style="color:  #ee751b;">0800-336-086</span></p>
             <p>或填寫以下資料，專人將盡速與您聯繫。</p>
         </div>
         <div id="contact-form">
@@ -396,7 +408,8 @@
                 <option class="option" value="type">男</option>
                 <option class="option" value="type">女</option>
             </select>
-            <input type="checkbox" id="checkbox"> <label id="agree" for="agree">同意</label><a href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
+            <input type="checkbox" id="checkbox"> <label id="agree" for="agree">同意</label><a
+                href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
         </div>
         <div id="form">
             <button id="btn">送出</button>

mobile/script/goto.js

@@ -1,9 +1,12 @@
 // menu彈跳視窗
 
 $("#menu-box2").hide();
+$("#menu-box").hide();
 
 $("#menu-btn1").click(function () {
+  $("#menu-box").fadeToggle("slow");
     $("#menu-box2").slideToggle( "slow" );
+
 });
 
 $(".feedback-slider1").slick({
@@ -17,7 +20,7 @@ $(".feedback-slider1").slick({
     dots:true,
     dotsClass:'slick-dots',
     speed:1000, 
-   
+   swipe:true,
   });
 
   $( ".link" ).click(function() {

mobile/style.css

@@ -20,7 +20,6 @@ body .title {
   font-weight: 900;
   padding: 15px;
   font-family: "Times New Roman", Times, serif;
-  font-size: 36px;
   color: #4b515e;
   text-align: center;
 }
@@ -37,6 +36,12 @@ body .title {
   }
 }
 
+@media screen and (max-width: 350px) {
+  body .title {
+    font-size: 25px !important;
+  }
+}
+
 body .btn {
   width: 100vw;
   text-align: center;
@@ -101,6 +106,7 @@ body .btn-main:hover {
 
 #banner-box {
   height: 45vh;
+  overflow: hidden;
 }
 
 @media screen and (max-width: 767px) {
@@ -130,6 +136,7 @@ body .btn-main:hover {
   height: 50vh;
   background-size: contain;
   background-repeat: no-repeat;
+  background-size: 100vw;
 }
 
 @media screen and (max-width: 767px) {
@@ -138,7 +145,7 @@ body .btn-main:hover {
   #banner-box .banner-slider .banner3 {
     height: 50vh;
     background-size: cover;
-    background-position: 40% 50%;
+    background-position: center center;
   }
 }
 
@@ -195,6 +202,12 @@ body .btn-main:hover {
   }
 }
 
+@media screen and (max-width: 350px) {
+  #content1 .title {
+    font-size: 25px;
+  }
+}
+
 #content1 .text {
   position: relative;
 }
@@ -240,6 +253,12 @@ body .btn-main:hover {
   }
 }
 
+@media screen and (max-width: 350px) {
+  #content1 .text .text2 h2 {
+    font-size: 1rem;
+  }
+}
+
 #content1 img {
   margin: 15px auto;
   width: 70vw;
@@ -261,6 +280,14 @@ body .btn-main:hover {
   text-align: center;
 }
 
+@media screen and (max-width: 350px) {
+  #service h1 {
+    margin: 50px 0;
+    padding: 0;
+    font-size: 25px !important;
+  }
+}
+
 #service .text {
   font-size: 1.5rem;
   display: inline;
@@ -306,6 +333,14 @@ body .btn-main:hover {
   }
 }
 
+@media screen and (max-width: 350px) {
+  #service .text .left-box {
+    padding-top: 5px;
+    margin-top: 15px;
+    padding-left: 10px;
+  }
+}
+
 #service .icon {
   width: 20vw;
 }
@@ -320,6 +355,12 @@ body .btn-main:hover {
   }
 }
 
+@media screen and (max-width: 350px) {
+  #service h1 {
+    font-size: 25px !important;
+  }
+}
+
 #service-process {
   margin: 0 auto;
   width: 60vw;
@@ -743,7 +784,8 @@ body .btn-main:hover {
 }
 
 #menu-box hr {
-  margin: 30px;
+  margin-left: 10px;
+  width: 350px;
   background: #65584c;
 }
 

mobile/style.scss

@@ -23,7 +23,6 @@ body {
         font-weight: 900;
         padding: 15px;
         font-family: "Times New Roman", Times, serif;
-        font-size: 36px;
         color:$title-color;
         text-align: center;
         @media screen and(max-width:$table) {
@@ -32,6 +31,11 @@ body {
         @media screen and(max-width:$moblie) {
             font-size: 34px;
         }
+        @media screen and(max-width: 350px) {
+            font-size:25px!important;
+           
+        }
+        
     }
     .btn {
         width: 100vw;
@@ -85,7 +89,7 @@ body {
 }
 #banner-box {
     height: 45vh;
-
+    overflow: hidden;
     @media screen and(max-width:$moblie) {
         height: 50vh;
     }
@@ -107,10 +111,12 @@ body {
             height: 50vh;
             background-size: contain;
             background-repeat: no-repeat;
+            background-size:100vw ;
+          
             @media screen and(max-width:$moblie) {
                 height: 50vh;
                 background-size: cover;
-                background-position: 40% 50%;
+                background-position:center center;
             }
 
             @media screen and(max-width:$table) {
@@ -149,6 +155,10 @@ body {
         @media screen and(max-width:$moblie) {
             font-size: 30px;
         }
+        @media screen and(max-width:350px) {
+            font-size: 25px;
+         }
+        
     }
     .text {
         position: relative;
@@ -165,6 +175,7 @@ body {
                 width: 80vw;
                 left: 10vw;
             }
+           
 
             h2 {
                 line-height: 1.5;
@@ -178,6 +189,9 @@ body {
                 @media screen and(max-width:$moblie) {
                     font-size: 22px;
                 }
+                @media screen and(max-width: 350px) {
+                    font-size: 1rem;
+                }
             }
         }
     }
@@ -195,7 +209,14 @@ body {
 #service {
     width: 100vw;
     text-align: center;
-    
+    h1{
+        @media screen and(max-width: 350px) {
+            margin: 50px 0;
+            padding: 0;
+            font-size: 25px !important;
+        }
+        
+    }
     .text {
         font-size: 1.5rem;
         display: inline;
@@ -227,6 +248,10 @@ body {
                 padding-left: 30px;
                 margin-top: 20px;
             }
+            @media screen and(max-width: 350px) {
+               padding-top:5px;
+               margin-top: 15px;   
+            padding-left: 10px;         }
         }
     }
     .icon {
@@ -237,6 +262,10 @@ body {
         @media screen and(max-width:$moblie) {
             font-size: 34px;
         }
+        @media screen and(max-width: 350px) {
+            font-size:25px!important;
+           
+        }
     }
     // .service-box {
     //     display: grid;
@@ -648,9 +677,12 @@ body {
     position: fixed;
     z-index: 5;
 
+
     hr {
-        margin: 30px;
+        margin-left: 10px;
+       width: 350px;
         background: #65584c;
+        
     }
     #menu-box2 {
         width: 100vw;
@@ -659,6 +691,7 @@ body {
         opacity: 0.9;
         z-index: 7;
         text-align: center;
+    
         #menu-link {
             display: grid;
             grid-template-columns: repeat(3, 1fr);