minor fixes

Author: cherylli

components/containers/CardsColumns.js

@@ -30,10 +30,16 @@ export default function CardsColumns({ cards, customClass }) {
               slidesPerView: 2,
               spaceBetween: 20,
             },
-            1334: {
-              slidesPerView: 3,
-              spaceBetween: 20,
-            },
+            1334:
+              customClass === 'blog'
+                ? {
+                    slidesPerView: 3,
+                    spaceBetween: 20,
+                  }
+                : {
+                    slidesPerView: cards.length,
+                    spaceBetween: cards.length < 3 ? 75 : 20,
+                  },
           }}
         >
           {cards.map((card, index) => (

pages/blog/category/all.js

@@ -4,7 +4,7 @@ export default function BlogCategory({ posts }) {
   return (
     <BlogPostsContainer
       posts={posts}
-      swipe={true}
+      swipe={false}
       heading='All Posts'
       viewall={false}
     />

styles/Blog.module.scss

@@ -7,11 +7,15 @@
 }
 
 .viewAll {
-  display: flex;
-  justify-content: flex-end;
   font-size: 1.5rem;
   font-weight: bold;
   margin: -6rem 6.5rem 4rem 0;
+  text-align: right;
+
+  @include mobile {
+    text-align: center;
+    margin: -5rem auto 4rem auto;
+  }
 }
 
 .blogSearch {
@@ -30,25 +34,44 @@
   flex-wrap: wrap;
   justify-content: center;
   margin-bottom: 3rem;
+
+  @include mobile {
+    justify-content: center;
+  }
+
+  @include tablet {
+    justify-content: space-between;
+  }
+
+  @include desktop {
+    justify-content: flex-start;
+    margin-left: 4rem;
+  }
 }
 
 .postContainer > div {
-  justify-content: space-between;
-
   @include mobile {
     flex-basis: 100%;
   }
 
   @include tablet {
-    flex-basis: 45%;
+    flex-basis: 43%;
   }
+
   @include desktop {
     flex-basis: 22%;
   }
 }
 
-.postContainer > div:last-child:nth-child(3n + 1) {
-  margin: 1.5rem auto 0 16%;
+.postContainer::after {
+  @include tablet {
+    content: '';
+    flex: auto;
+  }
+
+  @include desktop {
+    content: unset;
+  }
 }
 
 .tag {

styles/Card.module.scss

@@ -116,27 +116,16 @@
   }
 
   &.blog {
-    margin: 1.5rem 1.5rem 0 1.5rem;
-
-    @include desktop {
-      min-width: 25%;
-      max-width: 18.75rem;
-    }
-
     .card__image {
       height: 12rem;
     }
 
     .title {
       font-size: 1.3rem;
       margin-bottom: 0.7rem;
-      max-height: 6rem;
+      max-height: 7rem;
       overflow: hidden;
     }
-
-    .swiper-wrapper {
-      justify-content: flex-end;
-    }
   }
 
   .tagListContainer {

styles/CardsColumns.module.scss

@@ -20,8 +20,4 @@
       background-color: $dark-bg-color;
     }
   }
-
-  .swiperSlide {
-    max-width: 34.375rem;
-  }
 }