Mobile: fix card centering and spacing — Topics CardGrid, padding, zero li margin, stretch splits

Author: MMesch

src/components/about/styles.module.css

@@ -166,7 +166,6 @@ div .join_the_team_text {
 @media only screen and (max-width: 996px) {
   /*Mobile*/
   .value_card {
-    width: 264px;
     padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
   }
 

src/components/home/WhatWeDo/Topics.tsx

@@ -3,23 +3,22 @@ import { TopicsCard } from "./TopicsCard";
 import JupyterMD from "./topics/Jupyter.md";
 import SupplyChainMD from "./topics/SupplyChain.md";
 import ComputingMD from "./topics/Computing.md";
+import CardGrid from "../../layout/CardGrid";
 
 const TopicsDescriptions = [JupyterMD, SupplyChainMD, ComputingMD];
 
 export function Topics() {
   return (
-    <div>
-      <ul className="cards-row">
-          {topicsDetails.map((topics, index) => (
-            <li key={index}>
-              <TopicsCard
-                topics={topics}
-                TopicsDescriptionMD={TopicsDescriptions[index]}
-              />
-            </li>
-          ))}
-        </ul>
-    </div>
+    <CardGrid cols={3}>
+      {topicsDetails.map((topics, index) => (
+        <li key={index}>
+          <TopicsCard
+            topics={topics}
+            TopicsDescriptionMD={TopicsDescriptions[index]}
+          />
+        </li>
+      ))}
+    </CardGrid>
   );
 }
 

src/components/home/WhatWeDo/index.tsx

@@ -5,7 +5,7 @@ import LinkToProjects from "../LinkToProjects";
 
 export function WhatWeDo() {
   return (
-    <div className={"container" + styles.whatwedo_container}>
+    <div className={"container " + styles.whatwedo_container}>
       <div className="row flex-full-centered">
         <div className={styles.services_link_mobile}>
           <LinkToServices label={"DISCOVER OUR SERVICES"} />

src/components/home/WhatWeDo/styles.module.css

@@ -19,13 +19,12 @@ div .topics_header {
   }
 
   .whatwedo_container {
-    /*background-color: var(--ifm-color-primary-p1);*/
-    padding: 0;
+    padding: var(--ifm-spacing-xl) var(--ifm-spacing-lg);
     margin-top: 0;
   }
 
   .topics_card {
-    width: 80%;
+    padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
     text-align: left;
   }
 
@@ -54,7 +53,7 @@ div .topics_header {
   }
 
   .topics_card {
-    width: 350px;
     padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
+    height: 100%;
   }
 }

src/components/layout/styles.module.css

@@ -32,11 +32,11 @@
 
 @media (max-width: 996px) {
   .section {
-    padding: var(--ifm-spacing-2xl) 0;
+    padding: var(--ifm-spacing-3xl) 0;
   }
 
   .section_page_top {
-    padding-top: var(--ifm-spacing-xl);
+    padding-top: var(--ifm-spacing-2xl);
   }
 }
 
@@ -76,11 +76,17 @@
 @media (max-width: 996px) {
   .split {
     flex-direction: column;
+    align-items: stretch;
   }
 
   .split_reverse {
     flex-direction: column;
   }
+
+  .split_text,
+  .split_image {
+    width: 100%;
+  }
 }
 
 /* ─── CardGrid ─── */
@@ -94,6 +100,10 @@
   margin: 0;
 }
 
+.card_grid li {
+  margin-left: 0;
+}
+
 .card_grid_2 {
   grid-template-columns: repeat(2, 1fr);
 }

src/css/custom.css

@@ -731,6 +731,7 @@ ul.row {
 
 .cards-row > li {
   display: flex;
+  margin-left: 0;
 }
 
 .content-card {