調整專欄列表 rwd

columns/lists/index.html

@@ -233,7 +233,7 @@
         </p>
 
         <div class="category-btn">
-          <div class="d-flex flex-wrap main">
+          <div class="d-flex flex-wrap mb-3 main">
             <button>所有文章</button>
             <button>編輯精選</button>
             <button>居家設計</button>

columns/lists/js/main.js

@@ -190,7 +190,7 @@ async function dataSearch(type = "") {
         });
 
         resultHtml += `
-          <div class="col-md-4 mb-4 ${index === 1 ? 'mt-4' : ''}" style="${index > 2 && index % 3 !== 1 ? 'margin-top: -2rem;' : ''}">
+          <div class="col-md-4 mb-4 ${index === 1 ? 'mt-md-4' : ''} ${index > 2 && index % 3 !== 1 ? 'mt-masonry' : ''}">
             <a href="${item.ColumnLink}">
               <div class="card lists-card h-auto">
                 <img src="${item.ColumnCoverImg}" class="cover-img" alt="${item.ColumnTitle}">

css/lists.css

@@ -5,6 +5,11 @@
   font-weight: 500;
   letter-spacing: 0.5px;
 }
+@media (max-width: 575px) {
+  .list-content {
+    margin: 50px auto;
+  }
+}
 
 .list-headline {
   font-size: 24px;
@@ -53,6 +58,14 @@
 .filter-list .form-check-label {
   margin-left: 10px;
 }
+.filter-list .mt-masonry {
+  margin-top: -2rem;
+}
+@media (max-width: 767px) {
+  .filter-list .mt-masonry {
+    margin-top: 0;
+  }
+}
 .filter-list .search-tab {
   margin: 10px;
   border-color: #dbdbdb;
@@ -235,21 +248,44 @@
   background-color: #fff;
   box-shadow: 2px 3px 5px 2px #eee;
 }
+@media (max-width: 1200px) {
+  .filter-list .category-btn .main button {
+    width: 22%;
+  }
+}
+@media (max-width: 767px) {
+  .filter-list .category-btn .main button {
+    margin: 0.45rem;
+  }
+}
+@media (max-width: 575px) {
+  .filter-list .category-btn .main button {
+    width: 25vw;
+    font-size: 0.875rem;
+    padding: 1rem 0.5rem;
+  }
+}
 .filter-list .category-btn .sub {
   display: none;
   margin: 2rem auto;
-  padding: 1.5rem 1rem;
+  padding: 1rem;
   border-radius: 5px;
   background-color: #F4F4F4;
 }
 .filter-list .category-btn .sub button {
   padding: 0.5rem 1rem;
-  margin: 0 0.7rem;
+  margin: 0.7rem;
   color: #727679;
   font-weight: 400;
   border-radius: 5px;
   border: 1px solid #E0E0E0;
 }
+@media (max-width: 575px) {
+  .filter-list .category-btn .sub button {
+    margin: 0.5rem;
+    font-size: 0.875rem;
+  }
+}
 .filter-list .category-btn .main button:hover, .filter-list .category-btn .main button.active,
 .filter-list .category-btn .sub button:hover,
 .filter-list .category-btn .sub button.active {

css/lists.scss

@@ -4,6 +4,10 @@
   margin: 100px auto;
   font-weight: 500;
   letter-spacing: .5px;
+
+  @media (max-width: 575px) {
+    margin: 50px auto;
+  }
 }
 
 .list-headline {
@@ -62,6 +66,14 @@
     margin-left: 10px;
   }
 
+  .mt-masonry {
+    margin-top: -2rem;
+
+    @media (max-width: 767px) {
+      margin-top: 0;
+    }
+  }
+
   .search-tab {
     margin: 10px;
     border-color: #dbdbdb;
@@ -272,23 +284,42 @@
         border-radius: 5px;
         background-color: #fff;
         box-shadow: 2px 3px 5px 2px #eee;
+
+        @media (max-width: 1200px) {
+          width: 22%;
+        }
+
+        @media (max-width: 767px) {
+          margin: .45rem;
+        }
+
+        @media (max-width: 575px) {
+          width: 25vw;
+          font-size: 0.875rem;
+          padding: 1rem 0.5rem;
+        }
       }
     }
 
     .sub {
       display: none;
       margin: 2rem auto;
-      padding: 1.5rem 1rem;
+      padding: 1rem;
       border-radius: 5px;
       background-color: #F4F4F4;
 
       button {
         padding: .5rem 1rem;
-        margin: 0 .7rem;
+        margin: .7rem;
         color: #727679;
         font-weight: 400;
         border-radius: 5px;
         border: 1px solid #E0E0E0;
+
+        @media (max-width: 575px) {
+          margin: .5rem;
+          font-size: 0.875rem;
+        }
       }
     }