fix: about page mobile formatting

contact.html

@@ -36,12 +36,9 @@
     <header id="header"></header>
 
     <main>
-      <div class="flex-column">
+      <div class="flex-container">
         <h1>Contact Us</h1>
-        <p>
-          Don't hesitate to give us a shout. Our team is standing by, ready to
-          lend a helping hand.
-        </p>
+        <p>Our team is standing by, ready to lend a helping hand.</p>
         <div class="flex-row">
           <div class="flex-container bg-one">
             <h2>Email</h2>
@@ -56,8 +53,10 @@
             <h2>Session App ID</h2>
             <p>https://getsession.org/</p>
             <p>
-              Send message to:
-              05749d3243893f39b968b5531bb8054a957736b99a86abd8731d3b06cec9f59e1b
+              <strong>Send message to:</strong>
+              <span class="break-all"
+                >05749d3243893f39b968b5531bb8054a957736b99a86abd8731d3b06cec9f59e1b</span
+              >
             </p>
           </div>
           <div class="flex-container bg-one">

css/styles.css

@@ -105,13 +105,16 @@ ul,
 ol,
 td,
 li {
+  word-break: normal;
   color: #1c1c1c;
   text-align: left;
   margin: 0 auto;
   padding: 5px;
   max-width: 1000px;
 }
-
+.break-all {
+  word-break: break-all;
+}
 a {
   color: white;
   text-decoration: none;
@@ -410,8 +413,12 @@ input:checked + .drop + .menu-items {
   text-align: center;
   padding: 20px;
 }
-/* mobile menu */
+
 @media all and (max-width: 960px) {
+  .flex-column {
+    padding: 10px 5px;
+  }
+  /* mobile menu */
   /* First Tier Dropdown */
   /* Display All Items in Full-width Column */