RED響應式調整

Test2.html

@@ -1 +0,0 @@
-Test2.html

index.html

@@ -5,12 +5,17 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>幸福空間-手機版</title>
+    <title>HHH_Home_Decoration</title>
 
 
     <!-- Slick CDN -->
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
+     <!--  可視區域 viewport  -->
+  <!--  寬度 = 裝置寬度 width=device-width  -->
+  <!--  初始寬度 = 100% initial-scale=1.0  -->
+  <!--  縮放 = 否 user-scalable=no  -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <link rel="stylesheet" href="./style.css">
 </head>
 
@@ -23,7 +28,7 @@
     </nav>
 
     <div id="menu-box">
-        <!-- <div id="menu"> -->
+       
         <div id="menu-box2">
             <div id="menu1" class="menu-text"><a href="#!">首頁</a>
                 <div class="menu-text"><a href="#!">我有裝修需求</a></div>
@@ -38,7 +43,7 @@
             </div>
 
         </div>
-        <!-- </div> -->
+      
     </div>
 
     <section id="banner-box">
@@ -80,7 +85,7 @@
             <div class="text">
                 <div class="text2">
                     <h2>不了解裝修工程預算行情</h2>
-                    <h2>害怕被騙嗎</h2>
+                    <h2>害怕被騙嗎?</h2>
                 </div>
                 <img src="./img/03.jpg" alt="">
             </div>

script/goto.js

@@ -17,6 +17,6 @@ $(".feedback-slider1").slick({
     dots:true,
     dotsClass:'slick-dots',
     speed:1000, 
-    swipe:true,
+   
   });
 

style.css

@@ -25,9 +25,21 @@ body .title {
   text-align: center;
 }
 
+@media screen and (max-width: 1024px) {
+  body .title {
+    font-size: 48px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  body .title {
+    font-size: 34px;
+  }
+}
+
 body .btn {
   text-align: center;
-  margin-top: 30px;
+  margin-top: 20px;
 }
 
 body .btn-main {
@@ -43,6 +55,7 @@ body .btn-main {
   border-radius: 30px;
   -webkit-transition: 0.3s;
   transition: 0.3s;
+  margin-top: 50px;
 }
 
 body .btn-main:hover {
@@ -51,7 +64,15 @@ body .btn-main:hover {
   font-size: 17px;
 }
 
+@media screen and (max-width: 1024px) {
+  body .btn-main {
+    font-size: 20px;
+    padding: 20px;
+  }
+}
+
 .navigation {
+  width: auto;
   height: 60px;
   -webkit-box-shadow: 0 5px 9px rgba(0, 0, 0, 0.3);
           box-shadow: 0 5px 9px rgba(0, 0, 0, 0.3);
@@ -78,36 +99,62 @@ body .btn-main:hover {
 }
 
 #banner-box {
-  overflow: hidden;
+  height: 45vh;
+}
+
+@media screen and (max-width: 767px) {
+  #banner-box {
+    height: 50vh;
+  }
 }
 
-#banner-box .banner1, #banner-box .banner2, #banner-box .banner3 {
-  margin-top: -6px;
-  height: 70vh;
-  background-size: cover;
+#banner-box .banner-slider .banner1,
+#banner-box .banner-slider .banner2,
+#banner-box .banner-slider .banner3 {
+  width: 100vw;
+  height: 50vh;
+  background-size: contain;
   background-repeat: no-repeat;
-  background-position: 40% 50%;
-  background-size: 700px 500px;
 }
 
-#banner-box .banner1 h1, #banner-box .banner2 h1, #banner-box .banner3 h1 {
+@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: 40% 50%;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  #banner-box .banner-slider .banner1,
+  #banner-box .banner-slider .banner2,
+  #banner-box .banner-slider .banner3 {
+    height: 45vh;
+  }
+}
+
+#banner-box .banner-slider .banner1 h1,
+#banner-box .banner-slider .banner2 h1,
+#banner-box .banner-slider .banner3 h1 {
+  line-height: 40vh;
   text-align: center;
-  line-height: 500px;
   padding: 15px;
   color: #fff;
   font-family: 追奇手寫體;
   font-size: 72px;
 }
 
-#banner-box .banner1 {
+#banner-box .banner-slider .banner1 {
   background-image: url(./img/001.jpg);
 }
 
-#banner-box .banner2 {
+#banner-box .banner-slider .banner2 {
   background-image: url(./img/002.jpg);
 }
 
-#banner-box .banner3 {
+#banner-box .banner-slider .banner3 {
   background-image: url(./img/003.jpg);
 }
 
@@ -127,53 +174,140 @@ body .btn-main:hover {
 
 #content1 .text .text2 {
   position: absolute;
-  top: 80px;
-  left: 20px;
+  top: 15vw;
+  left: 20vw;
   z-index: 1;
 }
 
+@media screen and (max-width: 1024px) {
+  #content1 .text .text2 {
+    width: 60vw;
+    height: 30vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #content1 .text .text2 {
+    width: 80vw;
+    left: 10vw;
+  }
+}
+
 #content1 .text .text2 h2 {
   line-height: 1.5;
   color: #fff;
   text-align-last: left;
   font-size: 20px;
-  margin-left: 20px;
+  letter-spacing: 5px;
+}
+
+@media screen and (max-width: 1024px) {
+  #content1 .text .text2 h2 {
+    font-size: 32px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #content1 .text .text2 h2 {
+    font-size: 24px;
+  }
 }
 
 #content1 img {
   margin: 15px auto;
-  width: 400px;
-  height: 200px;
+  width: 70vw;
+  height: 30vh;
   -o-object-fit: cover;
      object-fit: cover;
   -webkit-filter: brightness(70%);
           filter: brightness(70%);
 }
 
+@media screen and (max-width: 767px) {
+  #content1 img {
+    width: 85vw;
+  }
+}
+
+#service {
+  width: 90vw;
+  margin: 0 auto;
+}
+
 #service h1 {
   margin: 50px;
 }
 
+@media screen and (max-width: 767px) {
+  #service h1 {
+    font-size: 36px;
+  }
+}
+
 #service .service-box {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: (1fr)[2];
       grid-template-columns: repeat(2, 1fr);
-  margin: 10px 0px;
+  width: 80vw;
+  height: 35vh;
+}
+
+@media screen and (max-width: 767px) {
+  #service .service-box {
+    width: 70vw;
+    height: 40vh;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  #service .service-box {
+    width: 70vw;
+    margin: 15px;
+  }
 }
 
 #service .service-box .text-left {
-  height: 350px;
-  width: 210px;
+  height: 25vh;
+  width: 30vw;
   background: #eee;
-  text-align: center;
+  text-align: left;
+}
+
+@media screen and (max-width: 1024px) {
+  #service .service-box .text-left {
+    width: 40vw;
+    height: 32vh;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #service .service-box .text-left {
+    text-align: left;
+    width: 50vw;
+  }
 }
 
 #service .service-box .text-left .icon-text {
-  margin: 30px;
+  width: 40vw;
+  margin: 15px auto;
 }
 
-#service .service-box .text-left p {
+@media screen and (max-width: 767px) {
+  #service .service-box .text-left .icon-text {
+    margin: 10px auto;
+    font-size: 15px;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  #service .service-box .text-left .icon-text {
+    font-size: 24px;
+    margin-left: 40px;
+  }
+}
+
+#service .service-box .text-left .icon-text p {
   font-family: 微軟正黑體;
   font-weight: bolder;
   font-size: 15px;
@@ -181,26 +315,89 @@ body .btn-main:hover {
   text-align: left;
 }
 
+@media screen and (max-width: 1024px) {
+  #service .service-box .text-left .icon-text p {
+    font-size: 22px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #service .service-box .text-left .icon-text p {
+    font-size: 14px;
+  }
+}
+
 #service .service-box .text-left img {
   margin-top: 30px;
+  margin-left: 50px;
   width: 128px;
   height: 128px;
 }
 
+@media screen and (max-width: 1024px) {
+  #service .service-box .text-left img {
+    width: 128px;
+    height: 128px;
+    margin-top: 10px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #service .service-box .text-left img {
+    width: 80px;
+    height: 80px;
+  }
+}
+
 #service .service-box .text-right img {
-  width: 300px;
-  height: 350px;
   -o-object-fit: cover;
      object-fit: cover;
 }
 
+@media screen and (max-width: 1024px) {
+  #service .service-box .text-right img {
+    height: 32vh;
+    width: 40vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #service .service-box .text-right img {
+    width: 40vw;
+    height: 32vh;
+  }
+}
+
+#service-process {
+  margin: 0 auto;
+  width: 60vw;
+}
+
+@media screen and (max-width: 767px) {
+  #service-process {
+    width: 80vw;
+  }
+}
+
 #service-process h1 {
   margin-top: 150px;
   margin-bottom: 50px;
 }
 
+@media screen and (max-width: 1024px) {
+  #service-process h1 {
+    margin-bottom: 150px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #service-process h1 {
+    font-size: 32px;
+  }
+}
+
 #service-process .process-box {
-  width: 350px;
+  width: 60vw;
   display: -ms-grid;
   display: grid;
   margin: 10px auto;
@@ -208,6 +405,12 @@ body .btn-main:hover {
       grid-template-columns: repeat(2, 1fr);
 }
 
+@media screen and (max-width: 767px) {
+  #service-process .process-box {
+    width: 70vw;
+  }
+}
+
 #service-process img {
   width: 128px;
   height: 128px;
@@ -215,10 +418,35 @@ body .btn-main:hover {
      object-fit: cover;
 }
 
+@media screen and (max-width: 1024px) {
+  #service-process img {
+    height: 256px;
+    width: 256px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #service-process img {
+    width: 128px;
+    height: 128px;
+  }
+}
+
 #service-process .process-title {
   text-align: center;
   width: 190px;
-  margin-right: 50px;
+}
+
+@media screen and (max-width: 1024px) {
+  #service-process .process-title {
+    width: 30vw;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  #service-process .process-title {
+    width: 40vw;
+  }
 }
 
 #service-process .process-title p {
@@ -227,14 +455,58 @@ body .btn-main:hover {
   font-weight: bolder;
 }
 
+@media screen and (max-width: 1024px) {
+  #service-process .process-title p {
+    width: 40vw;
+    font-size: 38px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #service-process .process-title p {
+    font-size: 18px;
+  }
+}
+
 #service-process .process-title img {
   margin: 20px;
   width: 32px;
   height: 32px;
 }
 
+@media screen and (max-width: 1024px) {
+  #service-process .process-title img {
+    margin-top: 50px;
+    width: 40px;
+    height: 40px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #service-process .process-title img {
+    margin-top: 10px;
+  }
+}
+
+#feedback {
+  margin: auto;
+  width: 70vw;
+}
+
+@media screen and (max-width: 767px) {
+  #feedback {
+    width: 90vw;
+  }
+}
+
 #feedback .feedback-slider1 {
-  margin: 10px;
+  width: 70vw;
+}
+
+@media screen and (max-width: 767px) {
+  #feedback .feedback-slider1 {
+    width: 90vw;
+  }
 }
 
 #feedback h1 {
@@ -256,12 +528,38 @@ body .btn-main:hover {
      object-fit: cover;
 }
 
+@media screen and (max-width: 1024px) {
+  #feedback .box img {
+    width: 70vw;
+    height: 30vh;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #feedback .box img {
+    width: 90vw;
+  }
+}
+
 #contact-us p {
   font-size: 16px;
   font-weight: 600;
   margin: 0px 10px;
 }
 
+@media screen and (max-width: 1024px) {
+  #contact-us p {
+    font-size: 24px;
+    text-align: center;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #contact-us p {
+    font-size: 16px;
+  }
+}
+
 #contact-us #form-title {
   padding-top: 100px;
   margin-bottom: 50px;
@@ -278,6 +576,18 @@ body .btn-main:hover {
   font-size: 24px;
 }
 
+@media screen and (max-width: 1024px) {
+  #contact-us h1 {
+    font-size: 36px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #contact-us h1 {
+    font-size: 24px;
+  }
+}
+
 #contact-us #contact-form {
   text-align: center;
 }
@@ -317,7 +627,7 @@ body .btn-main:hover {
 #contact-us #contact-form #name,
 #contact-us #contact-form #phone {
   font-size: 18px;
-  width: 80%;
+  width: 85%;
 }
 
 #contact-us #contact-form #gender {
@@ -327,7 +637,7 @@ body .btn-main:hover {
 
 #contact-us #contact-form #facebook {
   margin: 15px auto;
-  width: 350px;
+  width: 85vw;
   height: 60px;
   border: 1px solid #000093;
   text-align: right;
@@ -344,6 +654,12 @@ body .btn-main:hover {
   font-weight: normal;
 }
 
+@media screen and (max-width: 1024px) {
+  #contact-us #contact-form #facebook p {
+    top: 10px;
+  }
+}
+
 #contact-us #contact-form #facebook img {
   position: absolute;
   left: 30px;
@@ -368,8 +684,8 @@ body .btn-main:hover {
 }
 
 #contact-us #contact-form #checkbox {
-  margin: 15px;
-  padding: 15px;
+  margin-top: 50px;
+  padding: 20px;
   width: 15px;
   height: 15px;
 }
@@ -411,11 +727,11 @@ body .btn-main:hover {
   margin-top: 50px;
   padding-top: 50px;
   width: 100vw;
-  height: 100px;
+  height: 150px;
   background-color: #ffe4ca;
   color: #9f5000;
   text-align: center;
-  font-size: 18px;
+  font-size: 16px;
   line-height: 2;
 }
 
@@ -439,13 +755,13 @@ body .btn-main:hover {
 
 #menu-box hr {
   margin: 30px;
-  background: #65584C;
+  background: #65584c;
 }
 
 #menu-box #menu-box2 {
   width: 100vw;
   height: 45vh;
-  background-color: #F4F4F3;
+  background-color: #f4f4f3;
   opacity: 0.9;
   z-index: 7;
   text-align: center;
@@ -474,13 +790,13 @@ body .btn-main:hover {
 #menu-box #menu-box2 a {
   display: inline-block;
   text-decoration: none;
-  color: #65584C;
+  color: #65584c;
   font-size: 16px;
   margin-top: 20px;
 }
 
 #menu-box #menu-box2 .menu-text {
-  width: 100vwpx;
+  width: 100vw;
   text-align: center;
   margin-bottom: 10px;
 }

style.scss

@@ -3,6 +3,10 @@
     padding: 0;
     box-sizing: border-box;
 }
+$desktop: 1025px;
+$table: 1024px;
+$moblie: 767px;
+
 @font-face {
     font-family: 追奇手寫體;
     src: url(./drechifont-proportional.ttf);
@@ -18,10 +22,16 @@ body {
         font-size: 36px;
         color: rgb(65, 72, 84);
         text-align: center;
+        @media screen and(max-width:$table) {
+            font-size: 48px;
+        }
+        @media screen and(max-width:$moblie) {
+            font-size: 34px;
+        }
     }
     .btn {
         text-align: center;
-        margin-top: 30px;
+        margin-top: 20px;
     }
     .btn-main {
         box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
@@ -34,26 +44,30 @@ body {
         width: 280px;
         border-radius: 30px;
         transition: 0.3s;
-
+        margin-top: 50px;
         &:hover {
             background-color: #927368;
             width: 285px;
             font-size: 17px;
         }
+        @media screen and(max-width:$table) {
+            font-size: 20px;
+            padding: 20px;
+        }
     }
 }
 .navigation {
+    width: auto;
     height: 60px;
-    box-shadow:0 5px 9px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 5px 9px rgba(0, 0, 0, 0.3);
     position: relative;
     z-index: 5;
     .logo {
         padding: 10px;
         margin-bottom: 5px;
-       img{
-           width: 128px;
-           
-       }
+        img {
+            width: 128px;
+        }
     }
     #menu-btn1 {
         position: absolute;
@@ -64,37 +78,50 @@ body {
         z-index: 6;
     }
 }
-#banner-box{
-overflow: hidden;
-    .banner1,.banner2,.banner3{
-     margin-top: -6px;
-        h1 {
-            text-align: center;
-            line-height: 500px;
-            padding: 15px;
-            color: $Font-color;
-            font-family: 追奇手寫體;
-            font-size: 72px;
-        }
-        height: 70vh;
-        
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: 40% 50%;
-        background-size: 700px 500px;
-    }
-    .banner1{
-        background-image: url(./img/001.jpg);
-    }
-    .banner2{
-        background-image: url(./img/002.jpg);
-    }
-    .banner3{
-        background-image: url(./img/003.jpg);
+#banner-box {
+    height: 45vh;
+
+    @media screen and(max-width:$moblie) {
+        height: 50vh;
     }
-}
+    .banner-slider {
+        .banner1,
+        .banner2,
+        .banner3 {
+            width: 100vw;
+            height: 50vh;
+            background-size: contain;
+            background-repeat: no-repeat;
+            @media screen and(max-width:$moblie) {
+                height: 50vh;
+                background-size: cover;
+                background-position: 40% 50%;
+            }
 
+            @media screen and(max-width:$table) {
+                height: 45vh;
+            }
 
+            h1 {
+                line-height: 40vh;
+                text-align: center;
+                padding: 15px;
+                color: #fff;
+                font-family: 追奇手寫體;
+                font-size: 72px;
+            }
+        }
+        .banner1 {
+            background-image: url(./img/001.jpg);
+        }
+        .banner2 {
+            background-image: url(./img/002.jpg);
+        }
+        .banner3 {
+            background-image: url(./img/003.jpg);
+        }
+    }
+}
 
 #content1 {
     margin-top: 100px;
@@ -107,101 +134,225 @@ overflow: hidden;
         position: relative;
         .text2 {
             position: absolute;
-            top: 80px;
-            left: 20px;
+            top: 15vw;
+            left: 20vw;
             z-index: 1;
+            @media screen and(max-width:$table) {
+                width: 60vw;
+                height: 30vw;
+            }
+            @media screen and(max-width:$moblie) {
+                width: 80vw;
+                left: 10vw;
+            }
+
             h2 {
                 line-height: 1.5;
                 color: #fff;
                 text-align-last: left;
                 font-size: 20px;
-                margin-left: 20px;
+                letter-spacing: 5px;
+                @media screen and(max-width:$table) {
+                    font-size: 32px;
+                }
+                @media screen and(max-width:$moblie) {
+                    font-size: 24px;
+                }
             }
         }
     }
     img {
         margin: 15px auto;
-        width: 400px;
-        height: 200px;
+        width: 70vw;
+        height: 30vh;
         object-fit: cover;
         filter: brightness(70%);
+        @media screen and(max-width:$moblie) {
+            width: 85vw;
+        }
     }
 }
 #service {
+    width: 90vw;
+    margin: 0 auto;
     h1 {
         margin: 50px;
+        @media screen and(max-width:$moblie) {
+            font-size: 36px;
+        }
     }
     .service-box {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
-        margin: 10px 0px;
+        width: 80vw;
+        height: 35vh;
+        @media screen and(max-width:$moblie) {
+            width: 70vw;
+            height: 40vh;
+        }
+        @media screen and(max-width:$table) {
+            width: 70vw;
+            margin: 15px;
+        }
         .text-left {
-            height: 350px;
-            width: 210px;
+            height: 25vh;
+            width: 30vw;
             background: #eee;
-            text-align: center;
-            .icon-text {
-                margin: 30px;
+            text-align: left;
+            @media screen and(max-width:$table) {
+                width: 40vw;
+                height: 32vh;
             }
-            p {
-                font-family: 微軟正黑體;
-                font-weight: bolder;
-                font-size: 15px;
-                line-height: 1.5;
+            @media screen and(max-width:$moblie) {
                 text-align: left;
+                width: 50vw;
+            }
+
+            .icon-text {
+                width: 40vw;
+                margin: 15px auto;
+                @media screen and(max-width:$moblie) {
+                    margin: 10px auto;
+                    font-size: 15px;
+                }
+                @media screen and(max-width:$table) {
+                    font-size: 24px;
+                    margin-left: 40px;
+                }
+                p {
+                    font-family: 微軟正黑體;
+                    font-weight: bolder;
+                    font-size: 15px;
+                    line-height: 1.5;
+                    text-align: left;
+                    @media screen and(max-width:$table) {
+                        font-size: 22px;
+                    }
+                    @media screen and(max-width:$moblie) {
+                        font-size: 14px;
+                    }
+                }
             }
             img {
                 margin-top: 30px;
+                margin-left: 50px;
                 width: 128px;
                 height: 128px;
+                @media screen and(max-width:$table) {
+                    width: 128px;
+                    height: 128px;
+                    margin-top: 10px;
+                }
+                @media screen and(max-width:$moblie) {
+                    width: 80px;
+                    height: 80px;
+                }
             }
         }
         .text-right {
             img {
-                width: 300px;
-                height: 350px;
                 object-fit: cover;
+                @media screen and(max-width:$table) {
+                    height: 32vh;
+                    width: 40vw;
+                }
+                @media screen and(max-width:$moblie) {
+                    width: 40vw;
+                    height: 32vh;
+                }
             }
         }
     }
 }
 #service-process {
+    margin: 0 auto;
+    width: 60vw;
+    @media screen and(max-width:$moblie) {
+        width: 80vw;
+    }
     h1 {
         margin-top: 150px;
         margin-bottom: 50px;
+        @media screen and(max-width:$table) {
+            margin-bottom: 150px;
+        }
+        @media screen and(max-width:$moblie) {
+            font-size: 32px;
+        }
     }
     .process-box {
-        width: 350px;
+        width: 60vw;
         display: grid;
         margin: 10px auto;
         grid-template-columns: repeat(2, 1fr);
+        @media screen and(max-width:$moblie) {
+            width: 70vw;
+        }
     }
     img {
         width: 128px;
         height: 128px;
         object-fit: cover;
+        @media screen and(max-width:$table) {
+            height: 256px;
+            width: 256px;
+        }
+        @media screen and(max-width:$moblie) {
+            width: 128px;
+            height: 128px;
+        }
     }
     .process-title {
         text-align: center;
         width: 190px;
-        margin-right: 50px;
+
+        @media screen and(max-width:$table) {
+            width: 30vw;
+        }
+        @media screen and(max-width:$table) {
+            width: 40vw;
+        }
 
         p {
             font-size: 20px;
             font-family: 微軟正黑體;
             font-weight: bolder;
+            @media screen and(max-width:$table) {
+                width: 40vw;
+                font-size: 38px;
+            }
+            @media screen and(max-width:$moblie) {
+                font-size: 18px;
+            }
         }
         img {
             margin: 20px;
             width: 32px;
             height: 32px;
+            @media screen and(max-width:$table) {
+                margin-top: 50px;
+                width: 40px;
+                height: 40px;
+            }
+            @media screen and(max-width:$moblie) {
+                margin-top: 10px;
+            }
         }
     }
 }
 
 #feedback {
-    .feedback-slider1{
-        margin: 10px;
+    margin: auto;
+    width: 70vw;
+    @media screen and(max-width:$moblie) {
+        width: 90vw;
+    }
+
+    .feedback-slider1 {
+        width: 70vw;
+        @media screen and(max-width:$moblie) {
+            width: 90vw;
+        }
     }
     h1 {
         margin-top: 150px;
@@ -214,10 +365,18 @@ overflow: hidden;
             font-size: 18px;
             font-weight: 600;
         }
+
         img {
             width: 390px;
             height: 195px;
             object-fit: cover;
+            @media screen and(max-width:$table) {
+                width: 70vw;
+                height: 30vh;
+            }
+            @media screen and(max-width:$moblie) {
+                width: 90vw;
+            }
         }
     }
 }
@@ -226,6 +385,14 @@ overflow: hidden;
         font-size: 16px;
         font-weight: 600;
         margin: 0px 10px;
+
+        @media screen and(max-width:$table) {
+            font-size: 24px;
+            text-align: center;
+        }
+        @media screen and(max-width:$moblie) {
+            font-size: 16px;
+        }
     }
 
     #form-title {
@@ -240,6 +407,12 @@ overflow: hidden;
     h1 {
         text-align: center;
         font-size: 24px;
+        @media screen and(max-width:$table) {
+            font-size: 36px;
+        }
+        @media screen and(max-width:$moblie) {
+            font-size: 24px;
+        }
     }
     #contact-form {
         text-align: center;
@@ -275,7 +448,7 @@ overflow: hidden;
         #name,
         #phone {
             font-size: 18px;
-            width: 80%;
+            width: 85%;
         }
         #gender {
             display: block;
@@ -283,7 +456,7 @@ overflow: hidden;
         }
         #facebook {
             margin: 15px auto;
-            width: 350px;
+            width: 85vw;
             height: 60px;
             border: 1px solid #000093;
             text-align: right;
@@ -297,6 +470,9 @@ overflow: hidden;
                 right: 30px;
                 top: 20px;
                 font-weight: normal;
+                @media screen and(max-width:$table) {
+                    top: 10px;
+                }
             }
             img {
                 position: absolute;
@@ -318,8 +494,8 @@ overflow: hidden;
             color: #ff8000;
         }
         #checkbox {
-            margin: 15px;
-            padding: 15px;
+            margin-top: 50px;
+            padding: 20px;
             width: 15px;
             height: 15px;
         }
@@ -361,11 +537,11 @@ overflow: hidden;
     margin-top: 50px;
     padding-top: 50px;
     width: 100vw;
-    height: 100px;
+    height: 150px;
     background-color: #ffe4ca;
     color: #9f5000;
     text-align: center;
-    font-size: 18px;
+    font-size: 16px;
     line-height: 2;
     a {
         text-decoration: none;
@@ -375,7 +551,6 @@ overflow: hidden;
         margin-left: 5px;
         display: inline;
     }
-
 }
 
 #menu-box {
@@ -385,48 +560,44 @@ overflow: hidden;
     position: fixed;
     z-index: 5;
 
-
-      hr{
-          margin: 30px;
-          background:#65584C;
-      }
-      #menu-box2 {
+    hr {
+        margin: 30px;
+        background: #65584c;
+    }
+    #menu-box2 {
         width: 100vw;
         height: 45vh;
-        background-color: #F4F4F3;
+        background-color: #f4f4f3;
         opacity: 0.9;
         z-index: 7;
         text-align: center;
-        #menu-link{
+        #menu-link {
             display: grid;
-            grid-template-columns: repeat(3,1fr );
+            grid-template-columns: repeat(3, 1fr);
             width: 350px;
             margin: 0 auto;
         }
         .menu-logo {
             opacity: 1;
-          img {
-            width: 40px;
-            height: 40px;
-            filter: invert(34%) sepia(7%) saturate(1111%) hue-rotate(347deg) brightness(98%) contrast(88%);
-          }
-         
+            img {
+                width: 40px;
+                height: 40px;
+                filter: invert(34%) sepia(7%) saturate(1111%) hue-rotate(347deg) brightness(98%) contrast(88%);
+            }
         }
 
         a {
-          display: inline-block;
-          text-decoration: none;
-          color: #65584C;
-          font-size: 16px;
-          margin-top: 20px;
-          
+            display: inline-block;
+            text-decoration: none;
+            color: #65584c;
+            font-size: 16px;
+            margin-top: 20px;
         }
 
         .menu-text {
-          width: 100vwpx;
-          text-align: center;
-          margin-bottom: 10px;
+            width: 100vw;
+            text-align: center;
+            margin-bottom: 10px;
         }
-      }
-    
-  }
+    }
+}