Adjust swipable CardsColumns.js on mobile

Author: mariana-caldas

CHANGELOG.md

@@ -25,7 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Header.js component
 - reCAPTCHA
 - useIntersect Hook, Reveal container for scrolling using intersection API
-- A new swipable feature on CardColumns.js
+- swipable feature on CardsColumns.js
 
 ### Fixed
 
@@ -38,5 +38,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - installed yarn
 - normalized buttons' and links' styling
 - updated `package.json` commands for macOs
-
-
+- swipable CardsColumns.js on mobile

components/CardsColumns.js

@@ -1,9 +1,8 @@
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Pagination, Navigation } from 'swiper';
 import 'swiper/css';
-import "swiper/css/pagination";
-import "swiper/css/navigation";
-
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
 import Card from './Card';
 import Container from './Container';
 import styles from '../styles/CardsColumns.module.scss';
@@ -17,42 +16,42 @@ export default function CardsColumns({
   linkText,
 }) {
   return (
-      <Container>
-        <Swiper className={styles.swiper}
-          mousewheel={true}
-          grabCursor={true}
-          modules={[Pagination]}
-          pagination
-          centerInsufficientSlides={true}
-          slidesPerView={1.09}
-          breakpoints={{
-            769: {
-              slidesPerView: 2,
-              spaceBetween: 50,
-            },
-            1334: {
-              slidesPerView: 3,
-              spaceBetween: 50,
-            }
-          }}
-        >
-          {titles.map((title, index) =>
-            <SwiperSlide key={index} className={styles.swiperSlide}>
-              <div className={styles.inner__content}>
-                <Card
-                  title={title}
-                  image={images[index]}
-                  altTag={altTags[index]}
-                  content={content[index]}
-                  link={links[index]}
-                  linkText={linkText[index]}
-                  key={index}
-                />
-              </div>
-            </SwiperSlide>
-          )}
-
-        </Swiper>
-      </Container>
+    <Container>
+      <Swiper
+        className={styles.swiper}
+        mousewheel={true}
+        grabCursor={true}
+        modules={[Pagination]}
+        pagination
+        centerInsufficientSlides={true}
+        slidesPerView={1}
+        breakpoints={{
+          768: {
+            slidesPerView: 2,
+            spaceBetween: 20,
+          },
+          1334: {
+            slidesPerView: 3,
+            spaceBetween: 20,
+          },
+        }}
+      >
+        {titles.map((title, index) => (
+          <SwiperSlide key={index} className={styles.swiperSlide}>
+            <div className={styles.inner__content}>
+              <Card
+                title={title}
+                image={images[index]}
+                altTag={altTags[index]}
+                content={content[index]}
+                link={links[index]}
+                linkText={linkText[index]}
+                key={index}
+              />
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </Container>
   );
 }

styles/Card.module.scss

@@ -2,20 +2,18 @@
 @use './mixins' as *;
 
 .card {
-  margin: 1.5rem 0;
+  margin: 1rem 1rem 0 .5rem;
   padding: 1.5rem;
   border-radius: 1.5rem;
   box-shadow: $box-shadow;
   min-width: 32%;
   height: 37rem;
 
   @include desktop {
-
     margin: 1.5rem 1.5rem 0 1.5rem;
-
     &:first-child,
     &:last-child {
-      margin: 1.5rem 0 0 0;
+      margin: 1.5rem .5rem 0 .5rem;
     }
   }
 

styles/CardsColumns.module.scss

@@ -9,12 +9,15 @@
   @include desktop-breakpoint-plus {
     display: flex;
   }
+}
+
+.swiper {
+  margin-bottom: 5rem;
 
-  @include desktop-breakpoint-minus {
-    padding-bottom: 1rem;
+  :global(.swiper-pagination-bullet-active) {
+    background-color: $dark-bg-color;
   }
+
 }
 
-.swiper{
-  margin-bottom: 6rem;
-}
+