banner修正

index.html

@@ -105,7 +105,7 @@
         <p>SCROLL DOWN</p>
     </div>
     <!-- banner -->
-    <section id="banner" class="container-fluid" style="margin: 0; padding: 0;">
+    <section id="banner" class="container-fluid" style="margin: 0;">
 
         <div class="banner1" class="container-fluid">
             <img id="bannertitle" src="./img/banner/banner-title.png" alt="">
@@ -123,14 +123,17 @@
             <!-- 手機背景 -->
             <div style="text-align: center;">
                 <img id="mobilecover" src="./img/banner/cover-m.webp" alt="">
+                
+         
             </div>
-            
+           
             <a data-gt-target="#information" data-gt-duration="500" data-gt-offset="70"><button
-                    class="btn">手刀報名</button></a>
+                class="btn">手刀報名</button></a>
         </div>
+
     </section>
-    <a id="btn-a" data-gt-target="#information-mobile" data-gt-duration="500" data-gt-offset="100"><button
-            id="mobile-btn" class="btn">手刀報名</button></a>
+     <a id="btn-a" data-gt-target="#information-mobile" data-gt-duration="500" data-gt-offset="100"><button
+                id="mobile-btn" class="btn">手刀報名</button></a>
     <img class="arrow" data-gt-target="#top" data-gt-duration="500" data-gt-offset="0" src="./img/gotop.png" alt="">
     
     <section id="light-box" class="container-fluid">

style.css

@@ -305,21 +305,13 @@ body #btn-a #mobile-btn:hover {
   background-position: center;
   background-image: url(./img/banner/coverwebp.webp);
   position: relative;
-  height: 100vh;
+  padding-bottom: 3vw;
   overflow: hidden;
 }
 
-@media screen and (min-width: 1025px) {
-  #banner {
-    height: 100vh !important;
-  }
-}
-
 @media screen and (max-width: 767px) {
   #banner {
     background-image: none;
-    height: 88vh;
-    padding-bottom: 30vw;
   }
 }
 
@@ -329,12 +321,6 @@ body #btn-a #mobile-btn:hover {
   }
 }
 
-@media screen and (min-height: 800px) {
-  #banner {
-    height: 70vh;
-  }
-}
-
 @media screen and (min-height: 823px) {
   #banner {
     height: 75vh;
@@ -344,7 +330,6 @@ body #btn-a #mobile-btn:hover {
 #banner .banner1 {
   width: 85vw;
   padding-top: 10vw;
-  padding-bottom: 5vw;
   text-align: center;
 }
 
@@ -355,7 +340,7 @@ body #btn-a #mobile-btn:hover {
 @media screen and (max-width: 767px) {
   #banner .banner1 {
     width: 100vw;
-    padding-bottom: 10vw;
+    padding-bottom: 40vh;
     padding-top: 20vw;
   }
 }
@@ -391,6 +376,43 @@ body #btn-a #mobile-btn:hover {
   }
 }
 
+#banner .banner1 #mobilecover #btn-a {
+  text-decoration: none;
+}
+
+#banner .banner1 #mobilecover #btn-a #mobile-btn {
+  display: block;
+  margin: 0 auto;
+  width: 60vw;
+  border-radius: 30px;
+  padding: 12px;
+  background: #fff;
+  color: #a9d0c5;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  border: 3px solid #a9d0c5;
+  font-weight: 900;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+#banner .banner1 #mobilecover #btn-a #mobile-btn:hover {
+  background: #a9d0c5;
+  color: #fff;
+}
+
+@media screen and (min-width: 768px) {
+  #banner .banner1 #mobilecover #btn-a {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  #banner .banner1 #mobilecover #btn-a {
+    display: none;
+  }
+}
+
 #banner .banner1 h1 {
   font-size: 28px;
   font-weight: 900;

style.scss

@@ -246,24 +246,19 @@ body {
     background-position: center;
     background-image: url(./img/banner/coverwebp.webp);
     position: relative;
-    height: 100vh;
+    padding-bottom: 3vw;
     overflow: hidden;
-    @media screen and(min-width:$desktop) {
-        height: 100vh !important;
-    }
     @media screen and(max-width:$moblie) {
         background-image: none;
-        height: 88vh;
-        padding-bottom: 30vw;
+        // height: 88vh;
+ 
       
     }
     @media screen and(max-width:350px) {
         height: 90vh;
     }
 
-    @media screen and(min-height:800px) {
-        height: 70vh;
-    }
+   
     @media screen and(min-height:823px) {
         height: 75vh;
     }
@@ -272,15 +267,15 @@ body {
     .banner1 {
         width: 85vw;
         padding-top: 10vw;
-        padding-bottom: 5vw;
+
         text-align: center;
         a {
             text-decoration: none;
         }
-        
+       
         @media screen and(max-width:$moblie) {
             width: 100vw;
-            padding-bottom: 10vw;
+            padding-bottom: 40vh;
             padding-top: 20vw;
         }
         
@@ -304,6 +299,35 @@ body {
                 top: 30vw;
                 padding-top: 12vw;
             }
+            #btn-a {
+                text-decoration: none;
+        
+                #mobile-btn {
+                    display: block;
+                    margin: 0 auto;
+                    width: 60vw;
+                    border-radius: 30px;
+                    padding: 12px;
+                    background: #fff;
+                    color: #a9d0c5;
+                    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+                    border: 3px solid #a9d0c5;
+                    font-weight: 900;
+                    transition: 0.3s;
+                    &:hover {
+                        background: #a9d0c5;
+                        color: #fff;
+                    }
+                }
+
+                @media screen and(min-width:768px) {
+                    display: none;
+                }
+                @media screen and(min-width:$desktop) {
+                    display: none;
+                }
+            }
+            
         }
         h1 {
             font-size: 28px;