mac revealed content overlap on small screen, need to test

src/static/css/App.css

@@ -268,6 +268,11 @@ a {
   text-align: center;
 }
 
+#HomeContentContainer {
+  display: inline-block;
+  flex-grow: 1;
+}
+
 #HomeContent {
   padding: 3rem;
   display: inline-block;
@@ -317,15 +322,12 @@ a {
 }
 
 .onRight {
-  position: absolute;
+  margin: auto;
-  right: 0;
-  top: 0;
-  max-width: 100vw;
-  margin-right: 5px;
 }
 
 .onRight>* {
-  margin: auto;
+  margin-left: auto;
+  margin-right: 1em;
   margin-bottom: 5px;
 }
 
@@ -829,6 +831,10 @@ a {
 
 @media screen and (max-width: 1200px) {
 
+  #homepage {
+    flex-direction: column;
+  }
+
   .mobileV {
     flex-direction: column;
   }
@@ -883,9 +889,12 @@ a {
   }
 
   .onRight {
-    position: unset;
+    margin: unset;
     margin-top: 3rem;
-    margin-right: 0;
+  }
+
+  .onRight > * {
+    margin: auto;
   }
 
   .timeline {

src/templates/home.html

@@ -2,12 +2,15 @@
 <div class="foreground homeground"></div>
 <div class="foregroundContent homegroundContent">
   <div class="relative">
+    <div id="homepage" class="flex">
+    <div id="HomeContentContainer">
       <div class="flex">
       <div id="HomeContent" data-aos="fade-up">
         <h1>Andrew Simonson</h1>
         <h3>Computer Science student at Rochester Institute of Technology</h3>
       </div>
     </div>
+    </div>
     <div class="onRight" data-aos="fade-up">
       <img
         src="{{ url_for('static', filename='readme-stats-vercel-01-25-2023.svg') }}"
@@ -44,5 +47,6 @@
       </a>
     </div>
   </div>
+  </div>
 </div>
 {% endblock %}