Added media queries

index.html

@@ -13,7 +13,7 @@
             <div class="logo">
                 <img src="images/NigeriaLogos_logo.svg" alt="NigeriaLogos logo">
             </div>
-            <h1>An <a href="#!">open source</a> collection of high quality, pixel perfect Nigerian company logos for free use.</h1>
+            <h1>An <a href="#!">open source</a> collection of high quality, <br> pixel perfect Nigerian company logos <br> for free use.</h1>
         </div>
         <div class="searchbar">
             <div class="select">

scss/layout/_background.scss

@@ -36,14 +36,15 @@
         grid-template-rows: 1fr;
     }
     &__stripe {
-        border-right: .25px $col-grey-3;
+        border-right: .035rem $col-grey-3;
         opacity: .6;
         width: 100%;
         height: 100%;
         border-right-style: dashed;
 
         &:nth-child(even) {
             border-right-style: solid;
+            opacity: .45;
         }
 
     }

scss/layout/_header.scss

@@ -17,7 +17,7 @@ header {
             margin-top: 0;
 
             & img {
-                width: 100%;
+                width: 5vh;
                 transform: translateY(-15%);
             }
         }
@@ -60,6 +60,7 @@ header {
         }
         .select {
             flex-basis: 30%;
+            min-width: 120px;
             position: relative;
             cursor: pointer;
 

scss/layout/_section.scss

@@ -7,21 +7,26 @@ main {
     margin-bottom: 10%;
 }
 .logo {
-    width: 17.6vw;
-    margin-top: 5%;
+    width: calc(25% - 20px); //20px accounts for the margin
+    margin-top: 8%;
 
     &__holder {
         border-radius: 4px;
         width: 100%;
-        height: 17.6vw;
         background-color: $col-grey-4;
         display: flex;
         justify-content: center;
         align-items: center;
         text-align: center;
         position: relative;
 
-        &:hover > .logo__download{
+        &::before {
+            content: "";
+            display: block;
+            padding-top: 100%; 	
+        }
+
+        &:hover > .logo__download {
             opacity: 1;
         }
     }
@@ -33,6 +38,7 @@ main {
     &__text {
         width: 100%;
         overflow-x: hidden;
+        white-space: nowrap;
 
         &--primary { 
             font-weight: $fw-medium;

scss/main.scss

@@ -8,3 +8,7 @@
 @import 'layout/background';
 @import 'layout/footer';
 @import 'layout/section';
+
+@import 'responsive/background';
+@import 'responsive/header';
+@import 'responsive/section';

scss/responsive/_background.scss

@@ -0,0 +1,19 @@
+@media screen and (max-width: 1215px){
+    .background__stripe {
+        opacity: .4;
+
+        &:nth-child(even) {
+            opacity: .25;
+        }
+    }
+}
+
+@media screen and (max-width: 600px){
+    .background__stripe {
+        opacity: .2;
+
+        &:nth-child(even) {
+            opacity: .05;
+        }
+    }
+}

scss/responsive/_header.scss

@@ -0,0 +1,71 @@
+@media screen and (max-width: 750px){
+    .searchbar {
+        min-width: 50vw;
+
+        & .search {
+            margin-right: 6vw;
+        }
+    }
+}
+
+@media screen and (max-width: 450px){
+    header {
+        padding: 0;
+        overflow-x: hidden;
+
+        .heading {
+           width: 100vw;
+
+            & .logo {
+
+                & img {
+                    width: 5vh;
+                    transform: translateX(32vw) translateY(2vh);
+                }
+            }
+        }
+        h1{
+            margin-bottom: 20vh;
+            width: 100vw;
+        }
+        .searchbar {
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin: 0 auto;
+            margin-left: -2vw;
+            margin-top: 30vh;
+            margin-bottom: 50vh;
+            padding: 0;
+            width: 80vw;
+            height: 20vh;
+            position: absolute;
+
+            & .search {
+                width: 94%;
+                height: 8vh;
+
+                input{
+                    opacity: .7;
+                }
+
+                &::after {
+                    right: -3%;
+                    top: .4rem;
+                    width: 1.2rem;
+                    height: 1.2rem;
+                    transform: scale(.6);
+                }
+            }
+            & .select {
+                position: absolute;
+                top: 5vh;
+                min-width: 100%;
+                height: 20vh;
+                font-size: 170%;
+            }
+        }
+
+    }
+}
+

scss/responsive/_section.scss

@@ -0,0 +1,21 @@
+@media screen and (max-width: 1215px){
+    .logo {
+        width: calc(33.333333% - 20px); //20px accounts for the margin
+    }
+}
+
+@media screen and (max-width: 650px){
+    body {
+        font-size: 85%;
+    }
+
+    .logo {
+        width: calc(50% - 20px); //20px accounts for the margin
+    }
+}
+
+@media screen and (max-width: 450px){
+    body {
+        font-size: 60%;
+    }
+}