Make page mobile-friendlier

src/components/Footer/Footer.scss

@@ -21,6 +21,10 @@
     text-decoration: underline;
     padding: 0.4rem 0;
     font-size: 12px;
+
+    @media screen and (max-width: 600px - 1px) {
+      font-size: 16px;
+    }
   }
 
   & p {
@@ -28,6 +32,10 @@
     margin: 0;
     padding: 0.4rem 0;
     font-size: 12px;
+
+    @media screen and (max-width: 600px - 1px) {
+      font-size: 16px;
+    }
   }
 
   &__text {
@@ -48,6 +56,10 @@
     justify-content: space-between;
     flex-flow: row nowrap;
     font-weight: 100;
+
+    @media screen and (max-width: 600px - 1px) {
+      flex-flow: column nowrap;
+    }
   }
 
   &__content {
@@ -55,8 +67,11 @@
     position: relative;
     flex-flow: column;
     text-align: left;
-    padding-right: 3rem;
     min-width: 180px;
+
+    @media screen and (min-width: 600px) {
+      padding-right: 3rem;
+    }
   }
 
   &__links {
@@ -64,6 +79,10 @@
     position: relative;
     flex-flow: column;
     text-align: left;
+
+    @media screen and (max-width: 600px - 1px) {
+      margin-top: 2rem;
+    }
   }
 
   &__copyright {
@@ -77,7 +96,11 @@
     padding: 1rem 0;
 
     p {
-      padding: 0 1rem;
+      padding: 0.5rem 1rem;
+    }
+
+    @media screen and (max-width: 600px - 1px) {
+      flex-flow: column nowrap;
     }
   }
 }

src/components/FooterMap/FooterMap.scss

@@ -3,7 +3,7 @@
 .footer-map {
   display: flex;
 
-  @media screen and (max-width: 1200px) {
+  @media screen and (max-width: 1200px - 1px) {
     display: none;
   }
 

src/components/Header/Header.scss

@@ -4,6 +4,14 @@
   align-items: center;
   margin: 0 1rem;
 
+  @media screen and (max-width: 600px - 1px) {
+    flex-flow: column nowrap;
+
+    img {
+      max-width: 100% !important;
+    }
+  }
+
   img {
     max-width: 300px;
   }

src/components/HeroAsideItem/HeroAsideItem.scss

@@ -5,6 +5,14 @@
   line-height: 16px;
   margin-bottom: 1rem;
 
+  @media screen and (max-width: 600px - 1px) {
+    p,
+    a {
+      font-size: 16px !important;
+      line-height: 20px;
+    }
+  }
+
   h2 {
     color: $light-blue;
     text-transform: uppercase;

src/components/HeroAsideSection/HeroAsideSection.scss

@@ -6,7 +6,7 @@
   align-items: flex-start;
   flex: 4;
 
-  @media screen and (max-width: 800px) {
+  @media screen and (max-width: 800px - 1px) {
     align-items: center;
   }
 

src/components/Navigation/Navigation.scss

@@ -11,10 +11,15 @@ $border-width: 2px;
   color: $light-blue;
   margin-left: 5rem;
 
-  @media screen and (max-width: 1200px - 1px) {
+  @media screen and (min-width: 600px) and (max-width: 1200px - 1px) {
     justify-content: flex-end;
   }
 
+  @media screen and (max-width: 600px - 1px) {
+    justify-content: center;
+    margin-left: 0;
+  }
+
   a,
   a:-webkit-any-link {
     fill: $light-blue;
@@ -47,6 +52,10 @@ $border-width: 2px;
       display: none;
     }
 
+    @media screen and (max-width: 600px - 1px) {
+      margin-left: 3rem;
+    }
+
     svg {
       width: 26px;
       height: 26px;

src/components/PageSection/PageSection.scss

@@ -7,7 +7,7 @@
   flex-flow: row wrap;
   justify-content: flex-start;
 
-  @media screen and (max-width: 800px) {
+  @media screen and (max-width: 800px - 1px) {
     flex-flow: column nowrap;
   }