From 9f50614ec308122bcc7a40a09e2a3ca1f187f2fb Mon Sep 17 00:00:00 2001
From: Linna Luo <linnaluo18@gmail.com>
Date: Thu, 1 Jul 2021 21:14:01 -0400
Subject: [PATCH] mobile styling applied

---
 pages/about/index.module.css | 33 ++++++++++++++++++++-------------
 pages/about/index.tsx        |  2 +-
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/pages/about/index.module.css b/pages/about/index.module.css
index 9dba3d02..6310e88b 100644
--- a/pages/about/index.module.css
+++ b/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;
   }
 }
diff --git a/pages/about/index.tsx b/pages/about/index.tsx
index 25cfb77e..78a11ba7 100644
--- a/pages/about/index.tsx
+++ b/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}>