components/Bubble.module.css

@@ -1,14 +1,7 @@
 .bubble {
   padding: calc(36rem / 16) 0;
-  margin: calc(64rem / 16) 0;
 }
 
 .bubble:nth-child(odd) {
   background-color: var(--blue-1-20);
 }
-
-.bubble > * {
-  margin: 2rem auto;
-  max-width: calc(800rem / 16);
-  padding: 0 calc(24rem / 16);
-}

pages/about/index.module.css

@@ -1,8 +1,8 @@
 .title {
   color: var(--purple-2);
   font-size: 48px;
-  margin: 2rem auto;
-  max-width: calc(806rem / 16);
+  height: 80px;
+  margin-top: auto;
 }
 
 .headings h2 {
@@ -20,27 +20,21 @@
   color: black;
 }
 
-.flexBox {
-  margin: 2rem auto;
-  max-width: calc(806rem / 16);
-  position: relative;
+.titleContainer {
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
-  margin-bottom: -240px;
-}
-
-.flexBoxTitle {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  right: 280px;
-  bottom: -200px;
+  justify-content: space-between;
+  align-items: flex-start;
+  max-width: calc(800rem / 16);
+  margin: 0 auto;
+  overflow-y: clip;
+  height: 200px;
 }
 
 .codey {
   transform: rotate(1.91deg);
   z-index: -1;
+  height: 400px;
 }
 
 /*for temp mailing list components*/
@@ -71,24 +65,14 @@
 }
 /*for temp mailing list components*/
 
-@media only screen and (max-width: calc(768rem / 16)) {
-  .bubble:nth-child(odd) {
-    background-color: #e1eefa;
-  }
-
-  .flexBoxTitle {
-    position: relative;
+@media only screen and (max-width: calc(836rem / 16)) {
+  .titleContainer {
     display: flex;
-    flex-direction: row;
-    justify-content: center;
-    right: 0px;
-    bottom: 0px;
-  }
-
-  .flexBox {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    max-width: calc(800rem / 16);
+    margin: 0 auto;
+    overflow-y: clip;
+    height: 300px;
   }
 }

pages/about/index.tsx

@@ -8,10 +8,8 @@ import { SocialLinks } from "../../components/SocialLinks";
 export default function AboutUs() {
   return (
     <>
-      <div className={styles.flexBoxTitle}>
+      <div className={styles.titleContainer}>
         <h1 className={styles.title}>About Us!</h1>
-      </div>
-      <div className={styles.flexBox}>
         <Image src="/about/codey.svg" className={styles.codey} />
       </div>
       <div className={styles.headings}>