成家設計行動版

layouts/room_planner/room_planner.html

@@ -39,23 +39,42 @@
       <!-- <img src="/img/icon_serve@2x.png" alt=""> -->
       <div class="room-planner-service-icon-box">
         <div class="row px-0 mx-0">
-          <div class="col-lg-4">
-            <div class="icon-radius">
-              <img src="/img/room_planner/Group.png" alt=""  width="55">
+          <div class="col-lg-4 room-planner-service-icon-box-item">
+            <div class="row px-0 mx-0">
+              <div class="col-4 col-md-12">
+                <div class="icon-radius">
+                  <img class="icon-radius-img01" src="/img/room_planner/Group.png" alt="">
+                </div>
+              </div>
+              <div class="col-8 col-md-12">
+                <p class="icon-radius-text">成家設計服務</p>
+              </div>
             </div>
-            <p class="icon-radius-text">成家設計服務</p>
           </div>
-          <div class="col-lg-4">
-            <div class="icon-radius">
-              <img src="/img/room_planner/Group-1.png" alt="" width="71">
+          <div class="col-lg-4 room-planner-service-icon-box-item">
+            <div class="row px-0 mx-0">
+              <div class="col-4 col-md-12">
+                <div class="icon-radius">
+                  <img class="icon-radius-img02" src="/img/room_planner/Group-1.png" alt="">
+                </div>
+              </div>
+              <div class="col-8 col-md-12">
+                <p class="icon-radius-text">安心裝修服務</p>
+              </div>
             </div>
-            <p class="icon-radius-text">安心裝修服務</p>
           </div>
-          <div class="col-lg-4">
-            <div class="icon-radius">
-              <img src="/img/room_planner/Group-2.png" alt="" width="56">
+
+          <div class="col-lg-4 room-planner-service-icon-box-item">
+            <div class="row px-0 mx-0">
+              <div class="col-4 col-md-12">
+                <div class="icon-radius">
+                  <img class="icon-radius-img03" src="/img/room_planner/Group-2.png" alt="">
+                </div>
+              </div>
+              <div class="col-8 col-md-12">
+                <p class="icon-radius-text">家具與系統櫃</p>
+              </div>
             </div>
-            <p class="icon-radius-text">家具與系統櫃</p>
           </div>
         </div>
       </div>
@@ -74,14 +93,16 @@
             <p class="room-planner-process-icon-text">需求諮詢</p>
           </div>
           <div class="col">
-            <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/02.png" alt="" width="38"></div>
+            <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/02.png" alt=""
+                width="38"></div>
             <div class="room-planner-process-icon">
               <img src="/img/room_planner/Group-11.png" alt="" width="54">
             </div>
             <p class="room-planner-process-icon-text">成家設計</p>
           </div>
           <div class="col">
-            <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/03.png" alt="" width="45"></div>
+            <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/03.png" alt=""
+                width="45"></div>
 
             <div class="room-planner-process-icon">
               <img src="/img/room_planner/Group-12.png" alt="" width="47">
@@ -89,7 +110,8 @@
             <p class="room-planner-process-icon-text">設計報價</p>
           </div>
           <div class="col">
-            <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/04.png" alt="" width="45"></div>
+            <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/04.png" alt=""
+                width="45"></div>
 
             <div class="room-planner-process-icon">
               <img src="/img/room_planner/Group-13.png" alt="" width="58">
@@ -97,31 +119,40 @@
             <p class="room-planner-process-icon-text">確認付款</p>
           </div>
           <div class="col">
-            <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/05.png" alt="" width="45"></div>
+            <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/05.png" alt=""
+                width="45"></div>
             <div class="room-planner-process-icon">
               <img src="/img/room_planner/Group-14.png" alt="" width="54">
             </div>
             <p class="room-planner-process-icon-text">施工保固</p>
           </div>
+          <div class="col d-md-none d-block">
+
+          </div>
         </div>
       </div>
     </section>
-   
+    <div class="d-md-none d-block" style="margin:100px 0;">
+
+    </div>
+
     <!-- <div style="margin:150px 0;"></div> -->
-    <section class="room-planner-process-main">
+    <section class="room-planner-process-main d-md-block d-none">
       <div class="room-planner-process-main-box">
         <div style="position:relative;" class="room-planner-process-main-title-box main-border">
           <h1 class="room-planner-process-main-title">成家設計服務流程</h1>
-          <img style="position:absolute; right:-30px; bottom:-30px;" src="/img/room_planner/ruler2.png" alt="" width="77">
+          <img style="position:absolute; right:-30px; bottom:-30px;" src="/img/room_planner/ruler2.png" alt=""
+            width="77">
         </div>
         <div class="room-planner-process-main-content mt-80">
-          
+
 
           <div class="row px-0 mx-0">
             <div class="col-lg-4 ps-0 pe-0">
               <div class="room-planner-process-main-content-left border-E0EE79">
                 <div class="room-planner-process-main-content-left-box">
-                  <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 1</span><span class="step-sub-title" style="background-color:#fff ;">需求諮詢</span> </h2>
+                  <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 1</span><span
+                      class="step-sub-title" style="background-color:#fff ;">需求諮詢</span> </h2>
                   <div class="room-planner-process-main-content-left-step">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
                       <div>
@@ -233,7 +264,8 @@
               <div class="room-planner-process-main-content-left border-E0EE79">
                 <div class="room-planner-process-main-content-left-box">
                   <h2 class="room-planner-process-sub-title text-center">施工保固</h2>
-                  <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 5</span><span class="step-sub-title" style="background-color:#fff ;">施工保固</span> </h2>
+                  <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 5</span><span
+                      class="step-sub-title" style="background-color:#fff ;">施工保固</span> </h2>
 
                   <div class="room-planner-process-main-content-left-step">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
@@ -246,7 +278,7 @@
                         <span class="f-649E2E-24">裝修施工</span>
                         <p class="f-2A2A2A-16-400">安心裝修師傅開始到你家進行裝修，小寶優居將每週回報工程進度，每一項工種的完工，我們都將拍照驗收並進行回報。</p>
                       </div>
-                    </div> 
+                    </div>
                     <!-- <div class="dottedline"></div> -->
                     <hr class="dotted">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
@@ -267,8 +299,10 @@
                         </div>
                       </div>
                       <div>
-                        <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">無需拆除工程</span> 約 <span class="f-649E2E-20-q">2-3</span> 個月</p>
-                        <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">無需拆除工程</span> 約 <span class="f-649E2E-20-q">2.5-3.5</span> 個月</p>
+                        <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">無需拆除工程</span> 約 <span
+                            class="f-649E2E-20-q">2-3</span> 個月</p>
+                        <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">無需拆除工程</span> 約 <span
+                            class="f-649E2E-20-q">2.5-3.5</span> 個月</p>
                         <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">需要拆除工程與管線更新</span> 約 3-4 個月</p>
                       </div>
                     </div>
@@ -283,7 +317,8 @@
                         <span class="f-649E2E-24">家具定位</span>
                         <p class="f-2A2A2A-16-400">決定將家交給小寶優居時，我們會先簽訂<span
                             class="f-649E2E-18">《成家設計服務合約》</span>，並支付設計訂金，簽約後會正式開始你家的成家設計。</p>
-                            <p class="f-2A2A2A-16-400">裝修完成 <span class="f-649E2E-20-q">80%</span> 時，會進行系統櫃安裝，接著進行裝修工程的細部清潔，並安排家具運送到府定位。</p>
+                        <p class="f-2A2A2A-16-400">裝修完成 <span class="f-649E2E-20-q">80%</span>
+                          時，會進行系統櫃安裝，接著進行裝修工程的細部清潔，並安排家具運送到府定位。</p>
                       </div>
                     </div>
                     <div class="room-planner-process-main-content-left-step-item d-flex">
@@ -299,10 +334,10 @@
                     </div>
                   </div>
                 </div>
-                
+
               </div>
             </div>
-         
+
             <div style="position:relative;" class="col-lg-4">
               <img class="main-content-bg-line" src="/img/room_planner/line.png" alt="" width="490">
               <div class="room-planner-process-main-content-left">
@@ -312,16 +347,18 @@
                 <div class="room-planner-process-main-content-step-img">
                   <img class="img-fluid" src="/img/room_planner/step1-1.png" alt="">
                 </div>
-                <div style="margin-top:-40px; margin-left:60px;" class="room-planner-process-main-content-step-img text-center">
+                <div style="margin-top:-40px; margin-left:60px;"
+                  class="room-planner-process-main-content-step-img text-center">
                   <img class="img-fluid" src="/img/room_planner/step2.png" alt="" width="367">
                 </div>
-                  <img class="bg01-hand" src="/img/room_planner/background01.png" alt="" width="105">
+                <img class="bg01-hand" src="/img/room_planner/background01.png" alt="" width="105">
                 <div style="margin-top:50px;" class="room-planner-process-main-content-step-img">
-                  <img style="width: 90%; margin:0 auto ;"  src="/img/room_planner/step3.png" alt="">
+                  <img style="width: 90%; margin:0 auto ;" src="/img/room_planner/step3.png" alt="">
                 </div>
                 <div class="room-planner-process-main-content-step-4-6img">
                   <div class="room-planner-process-main-content-step-img text-end">
-                    <img style="margin-right: 50px; margin-top:-30px;" class="img-fluid" src="/img/room_planner/step4.png" alt="" width="226">
+                    <img style="margin-right: 50px; margin-top:-30px;" class="img-fluid"
+                      src="/img/room_planner/step4.png" alt="" width="226">
                   </div>
                   <div style="margin-top:10px ;" class="room-planner-process-main-content-step-img">
                     <img class="img-fluid" src="/img/room_planner/step5.png" alt="">
@@ -336,7 +373,8 @@
             <div class="col-lg-4">
               <div class="room-planner-process-main-content-left border-E0EE79">
                 <div class="room-planner-process-main-content-left-box">
-                  <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 2</span><span class="step-sub-title" style="background-color:#fff ;">成家設計</span> </h2>
+                  <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 2</span><span
+                      class="step-sub-title" style="background-color:#fff ;">成家設計</span> </h2>
                   <div class="room-planner-process-main-content-left-step">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
                       <div>
@@ -390,7 +428,8 @@
 
               <div class="room-planner-process-main-content-left border-E0EE79 mt-50">
                 <div class="room-planner-process-main-content-left-box">
-                  <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 3</span><span class="step-sub-title" style="background-color:#fff ;">設計報價</span> </h2>
+                  <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 3</span><span
+                      class="step-sub-title" style="background-color:#fff ;">設計報價</span> </h2>
 
                   <div class="room-planner-process-main-content-left-step">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
@@ -458,7 +497,8 @@
               </div>
               <div class="room-planner-process-main-content-left border-E0EE79 mt-50">
                 <div class="room-planner-process-main-content-left-box">
-                  <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 4</span><span class="step-sub-title" style="background-color:#fff ;">確認付款</span> </h2>
+                  <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 4</span><span
+                      class="step-sub-title" style="background-color:#fff ;">確認付款</span> </h2>
                   <div class="room-planner-process-main-content-left-step">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
                       <div>
@@ -529,25 +569,44 @@
         <div class="text-center room-planner-service2"><mark><span class="room-planner-service-no">3</span>大服務特色</mark>
         </div>
         <!-- <img src="/img/icon_serve@2x.png" alt=""> -->
-        <div class="room-planner-service-icon-box">
+        <div class="room-planner-service-icon-box2">
           <div class="row px-0 mx-0">
-            <div class="col-lg-4">
-              <div style="background-color: #fff;" class="icon-radius">
-                <img src="/img/room_planner/Group-15.png" alt="" width="68">
+            <div class="col-lg-4 room-planner-service-icon-box-item">
+              <div class="row px-0 mx-0">
+                <div class="col-4 col-md-12">
+                  <div style="background-color: #fff;" class="icon-radius">
+                    <img class="icon-radius-img04" src="/img/room_planner/Group-15.png" alt="貼近生活的設計">
+                  </div>
+                </div>
+                <div class="col-8 col-md-12">
+                  <p class="f-78B142-20 icon-radius-text">貼近生活的設計</p>
+                </div>
               </div>
-              <p class="f-78B142-20 icon-radius-text">貼近生活的設計</p>
             </div>
-            <div class="col-lg-4">
-              <div style="background-color: #fff;" class="icon-radius">
-                <img src="/img/room_planner/Group-16.png" alt="" width="58">
+            <div class="col-lg-4 room-planner-service-icon-box-item">
+              <div class="row px-0 mx-0">
+                <div class="col-4 col-md-12">
+                  <div style="background-color: #fff;" class="icon-radius">
+                    <img class="icon-radius-img05" src="/img/room_planner/Group-16.png" alt="透明清楚的服務">
+                  </div>
+                </div>
+                <div class="col-8 col-md-12">
+                  <p class="f-78B142-20 icon-radius-text">透明清楚的服務</p>
+                </div>
               </div>
-              <p class="f-78B142-20 icon-radius-text">透明清楚的服務</p>
             </div>
-            <div class="col-lg-4">
-              <div style="background-color: #fff;" class="icon-radius">
-                <img src="/img/room_planner/Group-17.png" alt="" width="66">
+
+            <div class="col-lg-4 room-planner-service-icon-box-item">
+              <div class="row px-0 mx-0">
+                <div class="col-4 col-md-12">
+                  <div style="background-color: #fff;" class="icon-radius">
+                    <img class="icon-radius-img06" src="/img/room_planner/Group-17.png" alt="健康安全的品質">
+                  </div>
+                </div>
+                <div class="col-8 col-md-12">
+                  <p class="f-78B142-20 icon-radius-text">健康安全的品質</p>
+                </div>
               </div>
-              <p class="f-78B142-20 icon-radius-text">健康安全的品質</p>
             </div>
           </div>
         </div>
@@ -558,7 +617,7 @@
     <section style="position:relative;" class="room_planner-sales-service">
       <div class="room_planner-sales-service-box">
         <div class="row px-0 mx-0">
-          <div class="col-lg-5">
+          <div class="col-12 col-md-5">
             <div class="text-center room-planner-service"><mark><span
                   class="room-planner-service-no">5</span>大安心裝修堅持</mark></div>
             <div class="room-planner-service-content">
@@ -591,14 +650,18 @@
               </div>
             </div>
             <div class="mt-30">
-              <p class="f-2A2A2A-20">用<span class="room-planner-service-no-28">5%</span> 的裝修服務費，換 <span
-                  class="room-planner-service-no-28">5%</span>的安心裝修</p>
+              <p class="f-2A2A2A-20 d-none d-md-block">用<span class="room-planner-service-no-28">5%</span> 的裝修服務費，換
+                <span class="room-planner-service-no-28">5%</span>的安心裝修</p>
+              <p class="f-2A2A2A-20 d-block d-md-none text-center">用<span class="room-planner-service-no-28">5%</span>
+                的裝修服務費，<br>換 <span class="room-planner-service-no-28">5%</span>的安心裝修</p>
             </div>
           </div>
-          <div class="col-lg-1 my-1 my-md-0 divider-wrapper d-flex justify-content-center align-items-center">
+          <div
+            class="col-lg-1 my-1 my-md-0 divider-wrapper d-flex justify-content-center align-items-center d-md-block d-none">
             <div class="divider"></div>
           </div>
-          <div class="col-lg-5">
+          <hr class="dotted d-md-none d-block">
+          <div class="col-12 col-md-5">
             <div class="w-80-auto">
               <div class="room-planner-service"><mark><span class="room-planner-service-no">5</span>項保固與售後服務</mark>
               </div>
@@ -620,8 +683,9 @@
         <div class="text-center mt-50"><button type="button" class="btn room_planner-sales-service-CTA"><span
               class="f-fff-18 me-3">立即預約</span></button></div>
       </div>
-        <img style="position:absolute;bottom:50px; right:100px" class="tree2-img" src="/img/room_planner/big.png" alt="" width="53">
-   
+      <img style="position:absolute;bottom:50px; right:100px" class="tree2-img" src="/img/room_planner/big.png" alt=""
+        width="53">
+
     </section>
 
 

themes/hugo-universal-theme-master/static/css/style.bhouse.scss

@@ -1640,11 +1640,71 @@ img {
   font-size: 28px;
   color: #649e2e;
 }
-.room-planner-service-icon-box {
+.room-planner-service-icon-box{
   margin-top: 30px;
   width: 650px;
   padding: 0 20px;
   text-align: center;
+  @media screen and (max-width: 767px) {
+    width: 80%;
+    margin:30px auto;
+    padding: 0 10px;
+  }
+}
+.room-planner-service-icon-box2{
+  margin-top: 30px;
+  width: 650px;
+  padding: 0 20px;
+  text-align: center;
+  p{
+    @media screen and (max-width: 767px) {
+      color:#2b2b2b !important;
+     
+    }
+    
+  }
+  @media screen and (max-width: 767px) {
+    width: 85%;
+    margin:30px auto;
+    padding: 0 10px;
+   
+  }
+  .icon-radius-img04{
+    margin-top: 10px;
+    width: 68px;
+    @media screen and (max-width: 767px) {
+      margin-top: 15px;
+      width: 41px;
+    }
+
+  }
+  .icon-radius-img05{
+    margin-top: 10px;
+    width: 58px;
+    @media screen and (max-width: 767px) {
+      margin-top: 15px;
+      width: 35px;
+    }
+ 
+  }
+  .icon-radius-img06{
+    margin-top: 10px;
+    width: 66px;
+    @media screen and (max-width: 767px) {
+      // margin-top: 15px;
+      width: 40px;
+    }
+
+  }
+}
+.room-planner-service-icon-box,.room-planner-service-icon-box2{
+ 
+
+  .room-planner-service-icon-box-item{
+    @media screen and (max-width: 767px) {
+      margin-top: 15px;
+    }
+  }
   .icon-radius-text {
     color: #78b142;
     font-size: 20px;
@@ -1658,18 +1718,49 @@ img {
     width: 120px;
     height: 120px;
     margin: 0 auto;
+    @media screen and (max-width: 767px) {
+     width: 72px;
+     height: 72px;
+     padding: 5px;
+    }
     img {
       // margin-top: 10%;
-      margin-top: 10px;
+      // margin-top: 10px;
       height: auto;
       object-fit: cover;
     }
+    .icon-radius-img01{
+      margin-top: 10px;
+      width: 55px;
+      @media screen and (max-width: 767px) {
+        margin-top: 15px;
+        width: 33px;
+       }
+    }
+    .icon-radius-img02{
+      margin-top: 10px;
+      width: 71px;
+      @media screen and (max-width: 767px) {
+        width: 42px;
+       }
+    }
+    .icon-radius-img03{
+      margin-top: 10px;
+      width: 56px;
+      @media screen and (max-width: 767px) {
+        width: 33.6px;
+       }
+    }
   }
 }
 .room-planner-process {
   position: relative;
   background: #f0f6dd;
   padding: 100px 0;
+  @media screen and (max-width: 767px) {
+    margin-top: 50px;
+    padding: 15px 0;
+    }
   .room-planner-process-house {
     position: absolute;
     left: 100px;
@@ -1679,12 +1770,26 @@ img {
     position: absolute;
     top: -70px;
     right: 100px;
+    @media screen and (max-width: 767px) {
+     top:580px;
+     right: 20px;
+     }
   }
   .room-planner-process-box {
     width: 60%;
     margin: 0 auto;
+    @media screen and (max-width: 767px) {
+      width: 80%;
+      margin-top: 80px;
+      }
+      @media screen and (max-width: 375px) {
+        width: 90%;
+        }
     .col {
       position: relative;
+      @media screen and (max-width: 767px) {
+       margin-bottom: 50px;
+        }
     }
     .room-planner-process-icon-number {
       position: absolute;
@@ -1724,6 +1829,11 @@ img {
   width: 80%;
   margin: 0 auto;
   padding: 50px 0;
+  @media screen and (max-width: 767px) {
+    width: 100%;
+    margin: 0 auto;
+
+     }
   .room-planner-service-content {
     margin-top: 50px;
     height: 188px;
@@ -1826,6 +1936,9 @@ img {
   position: absolute;
   right: 180px;
   bottom: -50px;
+  @media screen and (max-width: 767px) {
+   display: none;
+  }
 }
 .room-planner-process-main {
   position: relative;
@@ -1944,6 +2057,9 @@ img {
 .sub-banner2 {
   width: 650px;
   margin: 100px auto;
+  @media screen and (max-width: 767px) {
+    width: 100%;
+  }
 }
 
 // .room-planner .sub-banner img {
@@ -2138,6 +2254,11 @@ img {
 .w-80-auto {
   width: 80%;
   margin: 0 auto;
+  @media screen and (max-width: 767px) {
+    width: 100%;
+    margin: 0 auto;
+  }
+
 }
 
 .blog-categories .container {