mobile styling applied

pages/about/index.module.css

@@ -1,8 +1,6 @@
 .title {
   color: var(--purple-2);
   font-size: 48px;
-  position: relative;
-  bottom: -160px;
 }
 
 .headings {
@@ -45,16 +43,23 @@
 }
 
 .flexBox {
+  position: relative;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+  margin-bottom: -240px;
+}
+
+.flexBoxTitle {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  right: 280px;
+  bottom: -200px;
 }
 
 .codey {
   transform: rotate(1.91deg);
-  /* position: relative;
-  left: calc(400rem / 16);
-  margin-bottom: -280px; */
   z-index: -1;
 }
 
@@ -82,6 +87,7 @@
 
 .mailingList h2 {
   color: var(--blue-2);
+  font-size: 24px;
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
@@ -89,18 +95,19 @@
     background-color: #e1eefa;
   }
 
-  .title {
-    color: var(--purple-2);
-    font-size: 48px;
+  .flexBoxTitle {
+    position: relative;
     display: flex;
+    flex-direction: row;
     justify-content: center;
+    right: 0px;
+    bottom: 0px;
   }
 
-  .codey {
-    transform: rotate(1.91deg);
+  .flexBox {
     position: relative;
-    right: calc(1020rem / 16);
-    margin-bottom: -280px;
-    z-index: -1;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
   }
 }

pages/about/index.tsx

@@ -9,7 +9,7 @@ import { SocialLinks } from "../../components/SocialLinks";
 export default function AboutUs() {
   return (
     <MDXProvider components={{ h2: H2, p: Text, div: Div }}>
-      <div>
+      <div className={styles.flexBoxTitle}>
         <h1 className={styles.title}>About Us!</h1>
       </div>
       <div className={styles.flexBox}>