Fix style and alignment issues for the mobile design.

Author: HaudinFlorence

.github/workflows/static.yml

@@ -51,4 +51,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4

src/components/about/styles.module.css

@@ -24,7 +24,7 @@
   line-height: 20px;
   letter-spacing: 0.25px;
   color: var(--ifm-text-color-on-primary-p1);
-  text-align: center;
+  text-align: justify;
 }
 
 div .row {
@@ -138,9 +138,9 @@ div .join_the_team_text {
 @media only screen and (max-width: 996px) {
   /*Mobile*/
   .value_card {
-    height: 400px;
-    width: 264px;
-    padding: var(--ifm-spacing-xl) var(--ifm-spacing-lg);
+    height: 420px;
+    width: 280px;
+    padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
     border-radius: 8px;
     box-shadow: 0px 0px 8px 1px #c8c8c7;
     background-color: var(--ifm-color-primary-p1);
@@ -158,6 +158,11 @@ div .join_the_team_text {
     color: var(--ifm-text-color-on-primary-p1);
   }
 
+  .value_text p {
+    text-align: justify;
+    padding: 0;
+  }
+
   .large_portrait_card {
     width: 100%;
     height: 100%;
@@ -189,8 +194,8 @@ div .join_the_team_text {
 @media only screen and (min-width: 996px) {
   /*Desktop*/
   .value_card {
-    height: 540px;
-    width: 264px;
+    height: 460px;
+    width: 300px;
     padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
     border-radius: 8px;
     box-shadow: 0px 0px 8px 1px #c8c8c7;

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

@@ -27,9 +27,15 @@ div .topics_header {
 
   .topics_card {
     width: 100%;
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
+    padding: var(--ifm-spacing-lg) var(--ifm-spacing-lg);
+    text-align: justify;
+  }
+
+  .topics_card .p {
+    padding: var(--ifm-spacing-lg) var(--ifm-spacing-lg);
   }
 
+
   .services_link_desktop {
     display: none;
    }

src/components/projects/AllProjects.tsx

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

src/components/projects/ProjectCard.tsx

@@ -5,9 +5,9 @@ export default function ProjectCard({ project }): JSX.Element {
   const base = `${prefix}${project.name}` 
   return (
     <div className="container">
-      <div className="row row--no-gutters horizontally-centered">
+      <div className="row row--no-gutters">
         <div
-          className={"col col--6 col" + " " + styles.project_text}
+          className={"col col--6 col col--offset-1" + " " + styles.project_text}
         >
           <div className={styles.project_title}>{project.title}</div>
           <div className={styles.project_description}>

src/components/projects/styles.module.css

@@ -25,6 +25,10 @@ div .project_title {
 
 @media only screen and (max-width: 996px) {
   /*Mobile*/
+  .all_projects_container {
+    margin-bottom:  var(--ifm-spacing-3xl);
+    
+  }
 
   .header_container {
     padding-top: var(--ifm-spacing-2xl);
@@ -43,14 +47,14 @@ div .project_title {
     font-weight: 400;
     line-height: 20px;
     letter-spacing: 0.25px;
-    text-align: center;
+    text-align: justify;
     margin-bottom: var(--ifm-spacing-lg);
-    padding: var(--ifm-spacing-lg) var(--ifm-spacing-2xl);
+    padding: var(--ifm-spacing-lg) var(--ifm-spacing-xl);
   }
 
-  .col_project_text p {
+  .project_text {
     background-color: white;
-    text-align: center;
+    text-align: justify;
   }
 
   .project_picture_jupyter {
@@ -76,6 +80,10 @@ div .project_title {
 
 @media only screen and (min-width: 996px) {
   /*Desktop*/
+
+  .all_projects_container {
+    margin:  0 0 var(--ifm-spacing-5xl) 0 ;
+  }
   .header_container {
     margin-top: var(--ifm-spacing-6xl);
   }
@@ -94,10 +102,6 @@ div .project_title {
     padding: var(--ifm-spacing-lg) var(--ifm-spacing-4xl);
   }
 
-  .header_text p {
-    text-align: justify;
-  }
-
   .project_text {
     background-color: var(--ifm-color-orange-light);
     padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl);

src/components/services/SpecialProjects.tsx

@@ -7,7 +7,7 @@ export default function SpecialProjects() {
       <div className="main-container-with-margins">
         <div className="container upper-container-with-margin-top">
           <div className="row">
-            <div className="col col--4 col--offset-2">
+            <div className={"col col--4 col--offset-2"} style={{textAlign:"justify"}}>
               <h2>Special projects</h2>
               <SpecialProjectsMD />
             </div>

src/components/services/Support.tsx

@@ -11,7 +11,7 @@ export default function Support() {
               <SupportIllustration  height={"280px"} alt="Illustration for the support section, showing symbolically a person indicating the direction to take." />
             </div>
           </div>
-          <div className={"col col--6"}>
+          <div className={"col col--6"} style={{textAlign:"justify"}}>
             <h2>Professional Support</h2>
             <SupportMD />
           </div>

src/css/custom.css

@@ -92,6 +92,7 @@
 
 ul {
   padding-left: 0;
+  margin-left:0;
 }
 
 ul.row {
@@ -215,7 +216,7 @@ ul.row {
     line-height: 150%;
     line-height: 20px;
     letter-spacing: 0.25px;
-    text-align: center;
+    padding: 0 var(--ifm-spacing-lg) 
   }
 
   li {
@@ -301,6 +302,7 @@ ul.row {
     margin: var(--ifm-spacing-2xl) 0;
   }
 
+  
   h1 {
     color: var(--ifm-color-primary-p2);
     font-family: var(--ifm-font-family-bebas-neue);
@@ -648,4 +650,4 @@ a.menu__link:active {
   list-style-type: none;
   padding: none;
   width: 100%;
-}
+}