Bai - Fixed content overflow on mobile

src/components/Bai.js

@@ -91,10 +91,13 @@ class Bai extends React.Component {
     return (
         <div className="Bai">
             {content}
-            <h1>About</h1>
+            <div className="about">
-            <p> You can find the source, dataset and model created for BAI on github at 
+              <h1>About</h1>
-                <a href="https://www.github.com/RaspberryProgramming/BAI"> https://www.github.com/RaspberryProgramming/BAI</a>
+              <p>
-            </p>
+                You can find the source, dataset and model created for BAI on github at 
+              </p>
+              <a href="https://www.github.com/RaspberryProgramming/BAI"> https://www.github.com/RaspberryProgramming/BAI</a>
+            </div>
         </div>
     );
   }

src/components/css/App.css

@@ -2,6 +2,10 @@
     box-sizing: border-box;
 }
 
+a {
+    overflow-wrap: anywhere;
+}
+
 a:link {
     color: #FFFFFF;
     text-decoration: none;
@@ -69,10 +73,7 @@ html, body {
 }
 
 @media only screen and (max-width: 600px) {
-    .App {
-        flex-direction: column-reverse;
-    }
     .App .app-content {
-        margin-bottom: 5.5rem;
+        margin-bottom: 4rem;
     }
 }

src/components/css/Bai.css

@@ -3,13 +3,18 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 10%;
+    padding: 2rem;
 }
 
 .Bai * {
     margin-top: 5px;
 }
 
+.Bai .about {
+    display: flex;
+    flex-direction: column;
+}
+
 .Bai h1 {
     margin-left: auto;
     margin-right: auto;