restyle about page - mobile multi-column realign

src/static/css/App.css

@@ -191,7 +191,7 @@ a {
 
 .foreground {
   position: relative;
-  padding-top: 7rem;
+  padding-top: 6rem;
   padding-left: 8rem;
   width: calc(100%-8rem);
   min-height: calc(100vh - 8rem);
@@ -270,6 +270,10 @@ a {
   justify-content: left;
 }
 
+.relative {
+  position: relative;
+}
+
 .onRight {
   position: absolute;
   right: 0;
@@ -311,10 +315,20 @@ a {
   max-height: min(30rem, 100%);
 }
 
+/* #aboutGrid{
+  display: grid;
+} */
+
 .col {
-  float: left;
-  margin-right: 3rem;
   width: calc(50% - 3rem);
+  margin-bottom: 3em;
+}
+
+.rightCol {
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin-right: 3em;
 }
 
 .boxedImg {
@@ -868,6 +882,7 @@ a {
     /* centered objects will need to remove 1.5 of this to center */
     padding-right: .5rem;
     padding-bottom: 36px;
+    padding-top: 3em;
   }
 
   .homeground {
@@ -894,19 +909,11 @@ a {
     margin-bottom: 3rem;
   }
 
-  #aboutMe {
-    float: none;
-    display: block;
-    width: 90%;
+  .rightCol {
+    position: inherit;
+    margin-right: inherit;
   }
-
-  #skills {
-    float: none;
-    margin-right: auto;
-    display: block;
-    width: 90%;
-  }
-
+  
   .footer {
     position: relative;
     width: 100%;