From 03e5b0b9bccb6cb898fec4412a8b6e5ac7f9e9e1 Mon Sep 17 00:00:00 2001
From: Dheeraj Dixit <160017238+BitByteBoss@users.noreply.github.com>
Date: Fri, 18 Oct 2024 01:57:35 +0530
Subject: [PATCH] Navbar Not Responsive on Mobile Devices #547

---
 assets/css/style.css | 39 +++++++++++++++++++++++++--------------
 index.html           |  4 ++--
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index d91e48a8..06fffafa 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -418,7 +418,7 @@ body.nav-active .navbar-list .navbar-link {
 .header .container,
 .navbar-top {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-evenly;
   align-items: center;
 }
 
@@ -967,7 +967,7 @@ button:hover {
   /* Media query for smaller screens */
   @media (max-width: 768px) {
     .container {
-      flex-direction: column;
+      flex-direction: row;
       align-items: center;
       gap: 20px;
     }
@@ -1445,30 +1445,35 @@ button:hover {
 \*-----------------------------------*/
 
 /**
- * responsive for large than 575px screen
+ * responsive for Smaller than 575px screen
  */
 
-@media (min-width: 575px) {
+@media (max-width: 575px) {
   /**
    * REUSED STYLE
    */
 
   .container {
-    max-width: 640px;
+    /* max-width: 640px; */
     width: 100%;
-    margin-inline: auto;
+    /* margin-inline: auto; */
+    margin-left: 0;
   }
 
   .card {
     padding: 32px;
   }
+
+  .nav-open-btn{
+    margin-right: 20px;
+  }
 }
 
 /**
  * responsive for large than 768px screen
  */
 
-@media (min-width: 768px) {
+@media (max-width: 768px) {
   /**
    * CUSTOM PROPERTY
    */
@@ -1492,9 +1497,6 @@ button:hover {
    * REUSED STYLE
    */
 
-  .container {
-    max-width: 768px;
-  }
 
   .grid-list {
     grid-template-columns: 1fr 1fr;
@@ -1535,6 +1537,7 @@ button:hover {
 
   .container {
     max-width: 1024px;
+    margin-left: 0;
   }
 
   .btn {
@@ -1554,6 +1557,13 @@ button:hover {
     display: none;
   }
 
+  /* .nav-open-btn{
+    display: flex;
+    justify-content: flex-end;
+    
+    align-items: end;
+  } */
+
   .navbar,
   .navbar.active {
     all: unset;
@@ -1627,6 +1637,7 @@ button:hover {
 
   .container {
     max-width: 1170px;
+    margin-left: 0;
   }
 
   /**
@@ -1841,10 +1852,10 @@ button:hover {
     gap: 30px;
   }
 
-  #theme-toggle {
-    right: 125px;
-    top: 5px;
-  }
+  /* #theme-toggle {
+    /* right: 125px; */
+    /* top: 5px; */
+  /* } */ */
 
   /* Can be used if wanting a more linear Instagram post feed but as a viewer I like the grid better
   .footer-top .grid-list {
diff --git a/index.html b/index.html
index 401d0e63..4a594075 100644
--- a/index.html
+++ b/index.html
@@ -67,7 +67,7 @@
   <header class="header" data-header>
 
 
-    <div class="container" style="margin-left: 13rem;">
+    <div class="container" >
 
       <a href="#">
         <img src="./assets/images/Skillwise_logo-removebg-preview.png" width="50" height="10" alt="SkillWise home">
@@ -506,7 +506,7 @@ <h2 class="headline-md section-title">
           <p id="keppi" class="title-sm section-subtitle text-center ">Featured Courses</p>
 
           <h2 class="headline-md section-title text-center" id="course-label" data-aos="fade-down">
-            <div class="header1">Choose Unlimited <span class="span has-after">Courses</span< /div> >
+            <div class="header1">Choose Unlimited <span class="span has-after">Courses</span></div>
           </h2>
 
           <ul class="grid-list">