Merge pull request #749 from KartikG2/main

build : Added responsiveness to hamburger and light button
PriyaGhosal · Oct 20, 2024 · 5f09286 · 5f09286
2 parents 31872b8 + 77fcfa1
commit 5f09286
Showing 1 changed file with 43 additions and 5 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1502,7 +1502,6 @@ button:hover {
   position: absolute;
   right:0;
   margin-right: 5vw;
-  margin-top: 0.8vw;
  }
 
 @media (min-width: 768px) {
@@ -1877,10 +1876,9 @@ button:hover {
     gap: 30px;
   }
 
-  #theme-toggle {
-    right: 125px;
-    top: 5px;
-  }
+  /* #theme-toggle {
+    right: 12px;
+  } */
 
   /* Can be used if wanting a more linear Instagram post feed but as a viewer I like the grid better
   .footer-top .grid-list {
@@ -2207,3 +2205,43 @@ body {
   margin-bottom: 10px;
   /* Space between quote and name (optional) */
 }
+
+
+@media (max-width: 1484px) {
+  #theme-toggle{
+    right:80px;
+  }
+}
+@media (max-width: 1440px) {
+  #theme-toggle{
+    right:70px;
+  }
+}
+@media (max-width: 1200px) {
+  #theme-toggle{
+    right:60px;
+  }
+}
+@media (max-width: 1024px) {
+  #theme-toggle{
+    right:45px;
+  }
+}
+@media (max-width: 768px) {
+  #theme-toggle{
+    right:30px;
+  }
+  .nav-open-btn {
+    margin-top: 5px;
+  }
+}
+@media (max-width:425px) {
+  #theme-toggle{
+    right:30px;
+  }
+}
+@media (max-width:375px) {
+  #theme-toggle{
+    right:20px;
+  }
+}