Made the Auxillary menu responsive (#4240)

* Update media query breakpoints and adjust icon sizes for improved responsiveness * Adjusted specific breakpoints
sugarlabs · Jan 8, 2025 · 3a0af88 · 3a0af88
1 parent f9802a3
commit 3a0af88
Showing 1 changed file with 12 additions and 23 deletions.
diff --git a/lib/materialize-iso.css b/lib/materialize-iso.css
@@ -3363,7 +3363,7 @@ i.left {
 
 }
 
-@media only screen and (max-width: 1004px) {
+@media only screen and (max-width:1100px) {
 
   .materialize-iso .filler {
     display: none;
@@ -3377,7 +3377,7 @@ i.left {
   }
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: 820px) {
   .materialize-iso .filler {
     display: none;
   }
@@ -3415,7 +3415,7 @@ i.left {
   }
 }
 
-@media only screen and (max-width: 550px) {
+@media only screen and (max-width: 690px) {
   .materialize-iso .filler, .materialize-iso .logo {
     display: none;
   }
@@ -3436,16 +3436,16 @@ i.left {
 }
 
 
-@media only screen and (max-width: 450px) {
+@media only screen and (max-width: 525px) {
   .materialize-iso .filler, .materialize-iso .logo {
     display: none;
   }
 
   .materialize-iso nav .main i.material-icons {
     font-size: 20px;
     position: relative;
-    margin-left: -5px;
-    margin-right: -5px;
+    margin-left: -8px;
+    margin-right: -8px;
     padding: 0px;
   }
 
@@ -3458,39 +3458,28 @@ i.left {
   }
 }
 
-
 @media only screen and (max-width: 400px) {
   .materialize-iso .filler, .materialize-iso .logo {
-    display: block;
+    display: none;
   }
+
   .materialize-iso nav .main i.material-icons {
-    font-size: 18px;  
+    font-size: 15px;
     position: relative;
-    margin-left: -5px;
-    margin-right: -5px;
+    margin-left: -8px;
+    margin-right: -8px;
     padding: 0px;
   }
 
   .materialize-iso nav .aux i.material-icons {
-    font-size: 16px;  
+    font-size: 12px;
     position: relative;
     margin-left: -7.5px;
     margin-right: -7.5px;
     padding: 0px;
   }
 }
 
-@media only screen and (min-width: 360px) and (max-width: 400px) {
-  .materialize-iso nav .main i.material-icons,
-  .materialize-iso nav .aux i.material-icons {
-    font-size: 19px; 
-    position: relative;
-    margin-left: -4px; 
-    margin-right: -4px;
-    padding: 0; 
-  }
-}
-
 .materialize-iso nav .button-collapse {
   float: left;
   position: relative;