final media queries added to 320px minimum

css/main.css

@@ -134,7 +134,7 @@ header h1 {
     font-size: 2.5vw;
     text-align: center;
     margin-top: 15vw;
-    margin-bottom: 5vw;
+    margin-bottom: 3.8vw;
     letter-spacing: 3px;
 }
 
@@ -321,7 +321,7 @@ h5 {
 #row-logos img {
     margin: 0 4vw 0 4vw;
     align-self: center; /* Stops default image stretching from flexbox */
-    max-width: 85px; /* max-width:<pixels> from the largest box (from default width values) is a trick to make flexbox center things more evenly/globally. */
+    max-width: 5.9vw; /* max-width:<pixels> from the largest box (from default width values) is a trick to make flexbox center things more evenly/globally. */
 }
 
 #section-6 {
@@ -418,11 +418,12 @@ input {
 #section-8 a {
     list-style: none;
     color: gray;
+    font-size: 1.3vw;
 }
 
 footer h6 { /* There's absolutely no reason why I switched from #section-8 to footer here. They both do the same in this context */
     color: black;
-    font-size: 20px;
+    font-size: 1.3vw;
     font-family: exo-light;
 }
 
@@ -438,7 +439,6 @@ footer li {
 footer div {
     margin-right: 3vw;
     margin-left: 3vw;
-
 }
 
 footer li:hover {
@@ -477,17 +477,149 @@ footer input {
     margin-left: -5px;
 }
 
-@media only screen and (max-width : 320px) {
+/* Smartphones (portrait) ----------- */
+@media only screen and (max-width : 767px) {
     header h1 {
-        margin-top: 42vw;
+        margin-top: 4vw;
         max-width: 90vw;
     }
 
     header p {
         font-size: 2vw;
     }
+
+    .subheading-red {
+        font-size: 2vw;
+    }
+
+    h2 {
+        font-size: 5vw;
+    }
+
+    p {
+        font-size: 3vw;
+    }
+
+    #section-2 {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    #section-2 img {
+        margin-top: 4vw;
+    }
+
+    #section-3 div {
+        flex-direction: column;
+    }
+
+    #section-3 img {
+        width: 15vw;
+    }
+
+    #section-3 .columns .rows h6 {
+        font-size: 4vw;
+    }
+
+    #section-3 p {
+        margin-bottom: 15vw;
+    }
+
+    #section-4 {
+        flex-direction: column;
+        margin-top: -10vw;
+    }
+
+    #section-4 img {
+        margin-bottom: 5vw;
+    }
+
+    #section-5 {
+        background-size: 600%
+    }
+
+    #section-5 div {
+        flex-wrap: wrap;
+    }
+
+    #section-5 h5 {
+        font-size: 5vw;
+        margin-top: 3vw;
+    }
+
+    #section-5 .subheading-red {
+        font-size: 3vw;
+    }
+
+    #section-5 p {
+        font-size: 3vw;
+        line-height: 4vw;
+        margin-bottom: 20px;
+    }
+
+    #section-6 {
+        margin-top: 10vw;
+    }
+
+    #section-7 div {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    #section-7 h3, input {
+        margin: 4px 7px 4px 7px;
+        padding: 7px 7px 6px 7px;
+        width: 70vw;
+    }
+
+    #section-7 p {
+        font-size: 1.3vw;
+        margin-top: 3vw;
+    }
+
+    #section-7 h3 {
+        min-width: 70vw;
+    }
+
+    footer {
+        flex-wrap: wrap;
+        display: flex;
+    }
+
+    footer div {
+        margin-top: 6vw;
+        display: flex;
+        flex-direction: column;
+    }
+
+    #section-8 p {
+        max-width: 100%;
+        line-height: 5vw;
+    }
+
+    #section-8 a {
+        font-size: 3vw;
+    }
+
+    footer h6 { /* There's absolutely no reason why I switched from #section-8 to footer here. They both do the same in this context */
+        font-size: 3vw;
+    }
+
+    #get-newsletter > a {
+        justify-content: center;
+        display: flex;
+        margin-top: 15px;
+    }
+
+    #get-newsletter div {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-around;
+
+    }
 }
 
+/* iPads (portrait and landscape) ----------- */
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
     header h1 {
         margin-top: 10vw;