Fix alignments issues on the mobile design.

Author: HaudinFlorence

src/components/projects/AllProjects.tsx

@@ -1,21 +1,27 @@
 import { projectsDetails } from "./descriptions/projectsDetails";
-import ProjectCard from "./ProjectCard"
-
+import ProjectCard from "./ProjectCard";
 
 export default function AllProjects() {
   return (
-    <div className="container flex-full-centered" style={{marginBottom: "var(--ifm-spacing-3xl)"}}>
-      <ul className="row">
+    <div
+      className="container flex-full-centered"
+      style={{ marginBottom: "var(--ifm-spacing-3xl)" }}
+    >
+      <ul className="row --no-gutters">
         {projectsDetails.map((project, index) => {
-          return(
-          <li className="projects-list" key={index}>
-            <div className="col">
-              <ProjectCard project={project}/>
-            </div>
-          </li>
-          )
+          return (
+            <li
+              className="projects-list"
+              key={index}
+              
+            >
+              <div className="col" style={{ paddingLeft: "0" }}>
+                <ProjectCard project={project} />
+              </div>
+            </li>
+          );
         })}
       </ul>
     </div>
-  )
+  );
 }

src/components/projects/styles.module.css

@@ -16,8 +16,7 @@ div .project_title {
 }
 
 .project_description {
-  padding: var(--ifm-spacing-md) var(--ifm-spacing-xl);
-  text-align: center;
+  padding: var(--ifm-spacing-sm) var(--ifm-spacing-xl);
 }
 
 .project_description p {
@@ -51,7 +50,7 @@ div .project_title {
 
   .col_project_text p {
     background-color: white;
-    text-align: justify;
+    text-align: center;
   }
 
   .project_picture_jupyter {
@@ -96,7 +95,7 @@ div .project_title {
   }
 
   .header_text p {
-    text-align: center;
+    text-align: justify;
   }
 
   .project_text {

src/css/custom.css

@@ -94,6 +94,10 @@ ul {
   padding-left: 0;
 }
 
+ul.row {
+  padding-left: 0;
+}
+
 .container {
   max-width: none;
   padding: 0;
@@ -216,7 +220,7 @@ ul {
 
   li {
     font-size: 14px;
-    margin-left: 24px;
+    margin-left: 14px;
   }
 
   .blue-banner-container {
@@ -637,10 +641,11 @@ a.menu__link:active {
 .cards-list {
   list-style-type: none;
   padding: none;
+  margin-left: 0;
 }
 
 .projects-list {
   list-style-type: none;
   padding: none;
   width: 100%;
-}
+}