Clean up and adjustments for Mobile

src/components/AbortionInfo.js

@@ -5,8 +5,8 @@ import '../styles/App.css';
 function Abort() {
     return(
         <div className="App">
-            <Menu current="Abortion Information" />
-            <div className="Body">
+            <Menu current="Information" />
+            <div className="Body width">
                 An abortion is a medical procedure performed to end a pregnancy , which is done in a hospital, clinic or at home with the abortion pill. There are two types of abortion in Canada: abortion pill up to 9 weeks gestation and in-clinic abortion up to 24 weeks gestation.
                 <p/>
                 <p>

src/components/About.js

@@ -6,7 +6,7 @@ function Abort() {
     return(
         <div className="App">
             <Menu current="About Us" />
-            <div className="Body">
+            <div className="Body width">
                 <div className="et_pb_row et_pb_row_0">
 				    <div className="et_pb_column et_pb_column_4_4 et_pb_column_0  et_pb_css_mix_blend_mode_passthrough et-last-child">
 				        <div className="et_pb_module et_pb_text et_pb_text_0  et_pb_text_align_left et_pb_bg_layout_light">

src/components/Contact.js

@@ -27,9 +27,9 @@ function Contact() {
     return (
         <div className="App">
             <Menu current="Contacts" />
-            <div className="Body">
+            <div className="Body width">
                 <h1>Contacts</h1>
-                <p>Contacts for questions or more information. Links on this page will open a new tab.</p>
+                <p>Contacts for questions or more information. Links on this page will open a new tab. For locations, please visit the locations page.</p>
                 <div className="contacts-container">
                     {contactItems}
                 </div>

src/components/Home.js

@@ -10,7 +10,7 @@ function Home() {
   return (
     <div className="App">
       <Menu current="Homepage"/>
-      <div className="Body">
+      <div className="Body width">
         <div className="loc-link" id="fr-CA">Utilisez ce site en Français</div>
         <div>
           Choice Connect helps you find your nearest abortion provider based on your needs. The app features detailed referral information for more than 120 abortion providers and clinics across Canada. The web app is anonymous and free to use.

src/components/Menu.js

@@ -12,9 +12,11 @@ function Menu(current) {
         </li>
     );
     return (
-        <ul id="subNavWrapper" className="menu">
-            {listItems}
-        </ul>
+        <div className="menuContainer">
+            <ul id="subNavWrapper" className="menu">
+                {listItems}
+            </ul>
+        </div>
     )
 }
 

src/components/Panic.js

@@ -14,9 +14,12 @@ function Panic() {
                 </span>
             </div>
             <div id="panic-button-description">
-                <span className="translated-text" data-translate-key="leave_details">
+                <span className="translated-text full" data-translate-key="leave_details">
                 Leave the website by clicking this button.
                 </span>
+                <span className="translated-text short" data-translate-key="leave_details">
+                Leave Website.
+                </span>
             </div>
         </div>
     )

src/constants/constants.js

@@ -5,7 +5,7 @@ const constants = {
             path: "/"
         },
         {
-            name: "Abortion Information",
+            name: "Information",
             path: "/abort"
         },
         {

src/styles/Body.css

@@ -5,8 +5,19 @@
     padding-right: 1em;
     padding-top: 1em;
     padding-bottom: 1em;
-    width: 67%;
     background-color: white;
     float: right;
     text-align: left;
+}
+
+@media screen and (min-width: 873px) {
+    .width {
+        width: 67%;
+    }
+}
+
+@media screen and (max-width: 872px) {
+    .Body {
+        margin-left: 48px;
+    }
 }
\ No newline at end of file

src/styles/Logo.css

@@ -20,12 +20,19 @@
     width: 100%
 }
 
-@media screen and (min-width: 40em) {
+@media screen and (min-width: 640px) {
     .medium-8 {
         width: 100%;
     }
 }
 
+@media screen and (max-width: 639px) {
+    .medium-8 {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
 @media screen and (min-width: 40em) {
     .column, .columns {
         padding-left: 1.9375rem;

src/styles/Menu.css

@@ -2,25 +2,25 @@
     font-weight: 400!important;
     color: white;
     background-color: #096ab4;
-    margin-left: 4em;
     margin-top: 1em;
 }
 
-li:hover {
-    background-color: #0975c7;
-}
-
 ul {
-    display: block;
-    list-style-type: none;
+    color: #FFF;
     margin-block-start: 1em;
     margin-block-end: 1em;
     margin-inline-start: 0px;
     margin-inline-end: 0px;
-    color: #FFF;
 }
 
-@media (min-width: 992px) {
+li:hover {
+    background-color: #0975c7;
+}
+
+@media screen and (min-width: 873px) {
+    .menu {
+        margin-left: 4em;
+    }
     #subNavWrapper {
         display: block;
         margin-bottom: 0;
@@ -28,16 +28,46 @@ ul {
         width: 22%;
         min-height: 1px;
     }
+    ul {
+        display: block;
+        list-style-type: none;
+    }
+    a.menuLink {
+        padding-left: 1em;
+    }
 }
 
-@media (max-width: 991px) {
+@media screen and (max-width: 872px) {
+    .menuContainer {
+        margin-left: 2em;
+        padding-left: 1em;
+        padding-right: 32px;
+        width: 100%;
+    }
     #subNavWrapper {
-        display: block;
         margin-bottom: 0;
-        float: left;
-        width: 18%;
         min-height: 1px;
     }
+    ul {
+        list-style-type: none;
+        margin-block-start: 0em;
+        margin-block-end: 0em;
+        margin-inline-start: 0px;
+        margin-inline-end: 0px;
+        display: flex;
+        flex-direction: row;
+        width: 95%;
+    }
+    .menuContainer {
+        display: flex;
+        flex-direction: row;
+    }
+    li {
+        width:20%;
+    }
+    a.menuLink {
+        padding-left: 0.5em;
+    }
 }
 
 .menuLink {
@@ -52,7 +82,6 @@ a.menuLink {
     display: block;
     text-align: left;
     padding-top: 1em;
-    padding-left: 1em;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;

src/styles/Panic.css

@@ -4,10 +4,43 @@
     text-align: center;
     top: 1em;
     right: 1em;
-    min-width: 15rem;
     border: solid 2px #f00;
     border-radius: 5px;
     cursor: pointer;
+    max-height: 107px;
+    overflow: ellipse;
+}
+
+@media screen and (min-width: 640px){
+    .panic-button {
+        min-width: 15rem;
+    }
+    .panic-button-top  {
+        padding: 0em 1em;
+    }
+    .full {
+        display: inline-block;
+    }
+    .short {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 639px){
+    .panic-button {
+        max-width: 10rem;
+    }
+    .panic-button-top  {
+        padding: 0em 0.5em;
+    }
+    .full {
+        display: none;
+    }
+    .short {
+        display: flex;
+        padding-top: 0.3em;
+        padding-left: 0.3em;
+    }
 }
 
 #panic-button-top {
@@ -16,13 +49,13 @@
     font-weight: bold;
     font-size: 2em;
     letter-spacing: 0.2em;
-    padding: 0em 1em;
 }
 
 #panic-button-description {
     background-color: white;
     display: flex;
     padding: 0.2em 0.5em;
+    height: 48px;
 }
 
 #panic-button-description span {