版面修正

about/about.css

@@ -29,7 +29,13 @@ body .arrow {
 
 @media screen and (max-width: 767px) {
   body .arrow {
-    top: 500px;
+    top: 545px;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  body .arrow {
+    top: 445px;
   }
 }
 
@@ -320,16 +326,9 @@ body .arrow:hover {
   background: rgba(141, 194, 31, 0.8);
 }
 
-@media screen and (max-width: 350px) {
-  #banner #banner-container .banner-m .bannerm-1 {
-    padding-right: 5px;
-    padding-left: 5px;
-  }
-}
-
 #banner #banner-container .banner-m .bannerm-1 .btn {
   color: #fff;
-  width: 60px;
+  width: 55px;
   height: 40px;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -349,7 +348,7 @@ body .arrow:hover {
 }
 
 #banner #banner-container .banner-m .bannerm-1 .btn img {
-  width: 24px;
+  width: 22px;
   -o-object-fit: cover;
      object-fit: cover;
   -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);

about/about.scss

@@ -29,7 +29,10 @@ body {
         height: 40px;
         z-index: 10;
         @media screen and(max-width:$moblie) {
-            top: 500px;
+            top: 545px;
+        }
+        @media screen and(max-width:350px) {
+            top: 445px;
         }
         a {
             margin: 30px 0px;
@@ -251,13 +254,9 @@ body {
                 display: none;
             }
             .bannerm-1 {
-                @media screen and(max-width:350px) {
-                    padding-right: 5px;
-                    padding-left: 5px;
-                }
                 .btn{
                     color:#fff;
-                    width: 60px;
+                    width: 55px;
                     height: 40px;
                     box-shadow:none;
                     @media screen and(max-width:350px) {
@@ -270,7 +269,7 @@ body {
                         box-shadow:none;
                     }
                     img{
-                        width: 24px;
+                        width: 22px;
                         object-fit: cover;
                         filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
                     }

style.css

@@ -337,6 +337,13 @@ body .arrow:hover {
   background: rgba(141, 194, 31, 0.8);
 }
 
+@media screen and (max-width: 767px) {
+  #banner #banner-container .banner-m .bannerm-1 {
+    padding-right: 5px;
+    padding-left: 7px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   #banner #banner-container .banner-m .bannerm-1 {
     margin: 0;
@@ -345,7 +352,7 @@ body .arrow:hover {
 
 #banner #banner-container .banner-m .bannerm-1 .btn {
   color: #fff;
-  width: 60px;
+  width: 55px;
   height: 40px;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -358,7 +365,7 @@ body .arrow:hover {
 }
 
 #banner #banner-container .banner-m .bannerm-1 .btn img {
-  width: 24px;
+  width: 22px;
   -o-object-fit: cover;
      object-fit: cover;
   -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);

style.scss

@@ -257,13 +257,17 @@ body {
                 display: none;
             }
             .bannerm-1 {
+                @media screen and(max-width:$moblie) {
+                    padding-right: 5px;
+                    padding-left: 7px;
+                }
                 @media screen and(max-width:$moblie) {
                     margin: 0;
                 }
                 background: rgba(141, 194, 31, 0.8);
                 .btn{
                     color:#fff;
-                    width: 60px;
+                    width: 55px;
                     height: 40px;
                     box-shadow:none;
                     :focus{
@@ -271,7 +275,7 @@ body {
                         box-shadow:none;
                     }
                     img{
-                        width: 24px;
+                        width: 22px;
                         object-fit: cover;
                         filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
                     }