From 52a07513d69dcec487d37f249c5788e9bf2437ee Mon Sep 17 00:00:00 2001
From: Shola Umakhihe <jayumaks@gmail.com>
Date: Sat, 1 May 2021 21:36:36 +0100
Subject: [PATCH] Responsiveness added to the css file

---
 styles.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 65 insertions(+), 7 deletions(-)

diff --git a/styles.css b/styles.css
index c363a30..f93c450 100644
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,4 @@
 @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');
-
 * {
     margin: 0;
     padding: 0;
@@ -44,6 +43,28 @@ ul li a:hover {
     padding: 0.5rem;
 }
 
+@media screen and (max-width: 768px) {
+    div.nav-bar {
+        display: flex;
+        justify-content: space-between;
+        padding: 1rem;
+        width: 100vw;
+    }
+    div.logo {
+        font-size: 1.3rem;
+    }
+    ul.nav-links {
+        flex-direction: column;
+    }
+    ul li {
+        margin: 0;
+        font-size: 1rem;
+    }
+    ul li a {
+        display: block;
+    }
+}
+
 div.hero-section {
     background: #304353;
     padding: 10rem;
@@ -130,6 +151,28 @@ div.hero-background-pos {
     box-shadow: 2px 2px 15px 0 rgb(135 135 135 / 40%);
 }
 
+@media screen and (max-width: 768px) {
+    div.hero-background {
+        padding: 3rem;
+    }
+    div.background {
+        padding: 10px 30px;
+        width: 300px;
+        height: 250px;
+    }
+    div.background h4 {
+        padding: 1rem;
+        font-size: 1rem;
+    }
+    div.background p {
+        padding-left: 1rem;
+        font-size: 0.8rem;
+    }
+    div.hero-background-pos {
+        display: none;
+    }
+}
+
 div.snapshot-team {
     background: #f0f0f0;
     text-align: center;
@@ -198,7 +241,6 @@ div.circle {
     border-radius: 50%;
     background: #bcc3c7;
     margin-top: 2rem;
-    
 }
 
 div.box1 h5 {
@@ -232,10 +274,10 @@ div.gallery-content p {
 }
 
 div.gallery-img {
-   display: flex;
-   flex-wrap: wrap;
-   justify-content: center;
-   padding-top: 3rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-top: 3rem;
 }
 
 div.img {
@@ -247,6 +289,22 @@ div.img img {
     height: 180px;
 }
 
+@media screen and (max-width: 768px) {
+    div.gallery-section {
+        padding: 2rem;
+    }
+    div.img img {
+        width: 300px;
+        height: 100px;
+    }
+    div.gallery-content h4 {
+        font-size: 1.2rem;
+    }
+    div.gallery-content p {
+        font-size: 0.8rem;
+    }
+}
+
 div.footer {
     background: #304353;
     padding: 3rem;
@@ -344,4 +402,4 @@ div.footer h6 {
     color: #88949B;
     font-size: 1rem;
     padding-top: 6rem;
-}
\ No newline at end of file
+}