updated for different screen sizes

Anishkagupta04 · Aug 3, 2024 · 404afdf · 404afdf
1 parent 85237c9
commit 404afdf
Showing 1 changed file with 84 additions and 44 deletions.
diff --git a/index.css b/index.css
@@ -124,63 +124,103 @@ option {
 .img p{
     display: none;
 }
-@media only screen and (max-width: 820px) {
+@media (max-width: 820px) {
+    .nav_menu {
+      flex-direction: column;
+    }
+
     .hamburger {
-        display: block;
+      display: flex;
     }
-
-    .header_container {
-        flex-direction: column;
-        align-items: start;
-        height: 24.8rem;
-        transition: 0.55s all ease-out;
-        /* padding-top: 5px; */
+
+    .mobile-logo-text {
+      display: block;
     }
-
+  
     .nav_link {
-        flex-direction: column;
-        position: relative;
-        bottom: 40px;
+      display: none;
+      flex-direction: column;
+      position: fixed;
+      top: 60px;
+      right: 0;
+      background-color: #022a2d;
+      width: 100%;
+      padding: 20px;
+      z-index: 10;
+      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
+    }
+
+    .nav_link.active {
+      display: flex;
+    }
+
+    .nav_link li {
+      margin: 10px 0;
     }
+
+    .nav_link a {
+      font-size: 1.2em;
+    }
+
+    .nav_link .btn1 {
+      width: 100%;
+      text-align: center;
+    }
+  }
 
-    /* .nav-link li{
-    margin-bottom: 5px;
-  } */
-    .nav-h {
-        height: 5.5rem;
-        width: 100vw;
+@media (max-width: 880px) {
+    .nav_menu {
+      flex-direction: column;
+    }
+
+    .hamburger {
+      display: flex;
+    }
+
+    .mobile-logo-text {
+        display: inline-block;
+        color: white;
+        font-weight: bold;
+        margin-left: 50px;
+        margin-right: 16rem;
+        font-size: 40px;
+    }
+    #rd-logo {
+        margin-left: 21rem;
+        margin-right: -6rem;
     }
-    .img img{
+
+    .nav_link {
         display: none;
+        flex-direction: column;
+        position: fixed;
+        top: 60px;
+        left: 20px;
+        margin-top: 25px;
+        background-color: #022a2d;
+        width: 30%;
+        padding: 20px;
+        z-index: 10;
+        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
     }
-    .img p{
-        display: block;
-        position: relative;
-        left: 300px;
-        bottom: 0;
+
+    .nav_link.active {
+      display: flex;
     }
-}
-
-@media screen and (max-width: 992px) {
-    .container {
-        flex-wrap: wrap;
-        justify-content: center;
+
+    .nav_link li {
+      margin: 10px 0;
     }
-
-    .sec-img {
-        max-width: 100%;
-        margin: 20px 0;
-        position: relative;
-        top: 0;
-        right: 0;
-
+
+    .nav_link a {
+      font-size: 1.2em;
     }
-
-    .content {
-        text-align: center;
-        padding: 10px;
+  
+    .nav_link .btn1 {
+      width: 100%;
+      text-align: center;
     }
-}
+  }
 
 @media (max-width: 768px) {
     .nav_menu {