Update Cards Styles

Author: Sweetdevil144

src/components/CardList.js

@@ -55,15 +55,22 @@ const PeopleCard = (props) => {
 };
 
 const CardList = () => {
+  const half = Math.ceil(contributors.length / 2);
+  const firstHalf = contributors.slice(0, half);
+  const secondHalf = contributors.slice(half);
   return (
-    <>
-      <h2 style={{ textAlign: "center",margin:'0.5rem' }}>People</h2>
-      <div className={styles.peopleContainer}>
-        {contributors.map((person, index) => {
-          return <PeopleCard key={index} {...person} />;
-        })}
+    <div className={styles.mainContainer}>
+      <div className={styles.column}>
+        {firstHalf.map((person, index) => (
+          <PeopleCard key={index} {...person} />
+        ))}
       </div>
-    </>
+      <div className={styles.column}>
+        {secondHalf.map((person, index) => (
+          <PeopleCard key={index} {...person} />
+        ))}
+      </div>
+    </div>
   );
 };
 export default CardList;

src/components/people.module.css

@@ -1,12 +1,34 @@
-.peopleContainer {
+.card {
+  margin: 2rem;
+  max-width: 400px;
+  flex: 1 1 auto;
+}
+
+.mainContainer {
   display: flex;
-  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  margin: 2rem 0;
+  margin: 0;
+  padding: 0 5rem;
+  max-width: 100%;
 }
-.card {
-  margin: 2rem 4rem;
-  max-width: 400px;
-  flex: 1 1 auto;
+
+.column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  margin: 0 1rem;
 }
+
+@media (max-width: 768px) {
+  .mainContainer {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .column {
+    margin: 0;
+    width: 100%;
+  }
+}

src/pages/alumni.js

@@ -56,19 +56,32 @@ const PeopleCard = (props) => {
 };
 
 const Alumni = () => {
+  // Splitting the projectAlumni array into two
+  const half = Math.ceil(projectAlumni.length / 2);
+  const firstHalf = projectAlumni.slice(0, half);
+  const secondHalf = projectAlumni.slice(half);
+
   return (
     <Layout title="people">
       <div>
         <h2 style={{ textAlign: "center", margin: "0.5rem" }}>
           Project Alumni
         </h2>
-        <div className={styles.peopleContainer}>
-          {projectAlumni.map((person, index) => {
-            return <PeopleCard key={index} {...person} />;
-          })}
+        <div className={styles.mainContainer}>
+          <div className={styles.column}>
+            {firstHalf.map((person, index) => (
+              <PeopleCard key={index} {...person} />
+            ))}
+          </div>
+          <div className={styles.column}>
+            {secondHalf.map((person, index) => (
+              <PeopleCard key={index} {...person} />
+            ))}
+          </div>
         </div>
       </div>
     </Layout>
   );
 };
+
 export default Alumni;