調整手機板間距

css/style.css

@@ -105,7 +105,7 @@
   text-align: center;
   color: #333;
   width: 100%;
-  margin-bottom: 1rem;
+  margin: 1rem 0;
 }
 
 .Down_line {
@@ -211,7 +211,7 @@
 
 @media screen and (max-width: 767px) {
   #Navigation {
-    height: 20vw;
+    height: auto;
     position: fixed;
     z-index: 5;
   }
@@ -232,12 +232,6 @@
   padding-top: 1vw;
 }
 
-@media screen and (max-width: 767px) {
-  #Navigation #logo {
-    padding-top: 2vw;
-  }
-}
-
 #Navigation #logo img {
   width: 120px;
 }
@@ -288,7 +282,7 @@
 }
 
 #menu-box {
-  top: 20vw;
+  top: 4.4rem;
   height: 25vh;
   width: 100vw;
   position: fixed;
@@ -407,7 +401,7 @@
 
 @media screen and (max-width: 767px) {
   .banner-slide {
-    padding-top: 60px;
+    padding-top: 80px;
   }
 }
 
@@ -415,6 +409,12 @@
   margin: 100px 0px;
 }
 
+@media screen and (max-width: 767px) {
+  .news {
+    margin: 50px 0px 80px;
+  }
+}
+
 .news .news-slide {
   width: 80%;
   margin: 0 auto;
@@ -593,7 +593,6 @@
 .sec02＿course .sec01＿course_box .sec01＿course_text {
   text-align: center;
   padding: 15px 5.6%;
-  margin-top: 80px;
   letter-spacing: 1px;
 }
 
@@ -659,6 +658,13 @@
   letter-spacing: 1px;
 }
 
+@media screen and (max-width: 767px) {
+  .violetbeauty_sec03 {
+    padding: 50px 0;
+    margin-bottom: 0;
+  }
+}
+
 .violetbeauty_sec03 .sec03_img1 {
   position: absolute;
   left: 50px;

css/style.scss

@@ -88,14 +88,13 @@ $moblie: 767px;
 
 .features_title {
   font-weight: 300 !important;
-
   letter-spacing: 2px;
   font: 1.9375em "微軟正黑體";
   line-height: 25px;
   text-align: center;
   color: #333;
   width: 100%;
-  margin-bottom: 1rem;
+  margin: 1rem 0;
 }
 
 .Down_line {
@@ -176,7 +175,7 @@ $moblie: 767px;
     height: 8vw;
   }
   @media screen and(max-width:$moblie) {
-    height: 20vw;
+    height: auto;
     position: fixed;
     z-index: 5;
   }
@@ -191,13 +190,9 @@ $moblie: 767px;
     margin: 0 auto;
   }
 
-  //    rwd要注意高度
+  // rwd要注意高度
   #logo {
     padding-top: 1vw;
-    @media screen and(max-width:$moblie) {
-      padding-top: 2vw;
-    }
-
     img {
       width: 120px;
     }
@@ -243,7 +238,7 @@ $moblie: 767px;
 }
 // 手機彈跳視窗
 #menu-box {
-  top: 20vw;
+  top: 4.4rem;
   height: 25vh;
   width: 100vw;
   position: fixed;
@@ -334,11 +329,14 @@ $moblie: 767px;
 }
 .banner-slide {
   @media screen and(max-width:$moblie) {
-    padding-top: 60px;
+    padding-top: 80px;
   }
 }
 .news {
   margin: 100px 0px;
+  @media screen and(max-width:$moblie) {
+    margin: 50px 0px 80px;
+  }
   .news-slide {
     width: 80%;
     margin: 0 auto;
@@ -647,7 +645,6 @@ $moblie: 767px;
     .sec01＿course_text {
       text-align: center;
       padding: 15px 5.6%;
-      margin-top: 80px;
       letter-spacing: 1px;
       @media screen and(max-width:$moblie) {
         padding: 15px 2.8%;
@@ -695,6 +692,10 @@ $moblie: 767px;
   margin-bottom: 50px;
   position: relative;
   letter-spacing: 1px;
+  @media screen and(max-width:$moblie) {
+    padding: 50px 0;
+    margin-bottom: 0;
+  }
   .sec03_img1 {
     position: absolute;
     left: 50px;

index.html

@@ -208,7 +208,7 @@
       style="background-image: url(./img/liana-mikah-4RTAF3Z-0zM-unsplash.jpg); visibility: visible;">
       <div class="bg">
         <div class="violetbeauty_sec00_box">
-          <div class="row px-0 mx-0">
+          <div class="row px-0 mx-0 align-items-center">
             <div class="col-md-5">
               <div style="position: relative;">
                 <div class="text-center">
@@ -658,7 +658,7 @@
     <section class="sec02＿course">
       <div class="sec01＿course_box">
         <div class="sec01_course_item">
-          <div class="row px-0 mx-0">
+          <div class="row px-0 mx-0 align-items-center">
             <div class="col-md-5 px-0 mx-0">
               <div class="sec01＿course_text">
                 <h2 class="features_title">臉部課程</h2>
@@ -682,7 +682,7 @@
     <section class="sec01＿course">
       <div class="sec01＿course_box">
         <div class="sec01_course_item">
-          <div class="row px-0 mx-0">
+          <div class="row px-0 mx-0 align-items-center">
             <div class="col-md-7 px-0">
               <img class="img-fluid" src="./img/spa.jpg" alt="">
             </div>