Add specific css classes and use some display none properties to adjust the content of the footer in the mobile and in the desktop designs respectively.

Author: HaudinFlorence

src/components/footer/Footer.tsx

@@ -3,31 +3,34 @@ import styles from "./styles.module.css";
 import GHPicture from "@site/static/img/socialmedias/GH.svg";
 import LinkedInPicture from "@site/static/img/socialmedias/LinkedIn.svg";
 import XPicture from "@site/static/img/socialmedias/X.svg";
-import AstronautPicture from "@site/static/img/quantstack/astronaut-footer.svg";
+
+export function SocialMediasQuantStack() {
+  return (
+    <div>
+      <b>Follow us on</b> <br />
+      <div className={styles.social_media_links_quantstack}>
+        <Link href={"https://github.com/QuantStack"}>{<GHPicture />}</Link>
+        <Link href={"https://www.linkedin.com/company/quantstack/mycompany"}>
+          {<LinkedInPicture />}
+        </Link>
+        <Link href={"https://twitter.com/QuantStack"}>{<XPicture />}</Link>
+      </div>
+    </div>
+  );
+}
 
 export default function Footer() {
   return (
     <div className={"container" + " " + styles.footer_container}>
       <div className={"row"} style={{ paddingBottom: "var(--ifm-spacing-xl)" }}>
-        <div className="col col--4 flex-full-centered">
-          <div className={styles.social_media_links}>
-            <b>Follow us on</b> <br />
-            <div className="flex-full-centered">
-              <Link href={"https://github.com/QuantStack"}>
-                {<GHPicture />}
-              </Link>
-              <Link
-                href={"https://www.linkedin.com/company/quantstack/mycompany"}
-              >
-                {<LinkedInPicture />}
-              </Link>
-              <Link href={"https://twitter.com/QuantStack"}>
-                {<XPicture />}
-              </Link>
-            </div>
-          </div>
+        <div
+          className={
+            "col flex-full-centered" + " " + styles.social_media_desktop
+          }
+        >
+          <SocialMediasQuantStack />
         </div>
-        <div className={"col col--4"}>
+        <div className={"col"}>
           <div className={"container" + " " + styles.menu_container}>
             <div style={{ textAlign: "center" }}>
               <b>Menu</b> <br />
@@ -64,7 +67,11 @@ export default function Footer() {
           </div>
         </div>
 
-        <div className="col col--4 flex-full-centered">
+        <div className="col">
+        <div className={styles.social_media_mobile}>
+          <SocialMediasQuantStack/>
+        </div>
+
           <div className={styles.office_address}>
             <b>QuantStack office</b> <br />
             16, avenue Curti <br />

src/components/footer/styles.module.css

@@ -13,11 +13,18 @@
   .menu_container {
     display: none;
   }
+
+  .social_media_desktop {
+    display: none;
+  }
 }
 
 @media only screen and (min-width: 996px) {
   /*Desktop*/
-  .social_media_links {
+  .social_media_links_quantstack {
     padding-bottom: var(--ifm-spacing-xl);
   }
+  .social_media_mobile {
+    display: none ;
+  }
 }