style: style fixed for filters in cityFood.css for width <400px and w…

…idth>600px
sanidhiya-khandelwal · Jan 4, 2024 · 1e72112 · 1e72112
1 parent 4f4ce2d
commit 1e72112
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 29 deletions.
diff --git a/cityFood.css b/cityFood.css
@@ -1508,7 +1508,6 @@ a {
         margin-top: 0.8rem;
     }
 
-
     .detect-current-location {
         display: none;
     }
@@ -1574,6 +1573,7 @@ a {
         margin-left: 0.4rem;
         margin-right: 0rem;
         margin-top: 0rem;
+        padding: 1.5rem 6rem;
     }
 
 

diff --git a/cityFood.js b/cityFood.js
@@ -20,44 +20,52 @@ document.addEventListener('DOMContentLoaded', function () {
 })
 
 
-// makes search container visible on scroll in small screens
+// makes search container visible on scroll 
+var screenWidth = window.innerWidth || document.documentElement.clientWidth;
+
+
 window.addEventListener('scroll', function () {
     var dishContainer = document.querySelector('.dish-sm');
     var deliveryDiningContainerSM = document.querySelector('.delivery-dining-container-sm')
     var scrollPosition = window.scrollY;
-    if (scrollPosition > 150) {
-        dishContainer.style.display = 'block';
-        document.querySelector('.filters').style.padding = '1.8rem 5.3rem';
-        document.querySelector('.filters').style.top = '4.7rem';
-        deliveryDiningContainerSM.style.display = 'none';
+    if (screenWidth > 900) {
+        if (scrollPosition > 150) {
+            console.log('SW ', screenWidth);
+            dishContainer.style.display = 'block';
+            document.querySelector('.filters').style.padding = '1.8rem 5.3rem';
+            // document.querySelector('.filters').style.top = '4.7rem';
+            deliveryDiningContainerSM.style.display = 'none';
+        }
+        else {
+            dishContainer.style.display = 'none';
+            document.querySelector('.filters').style.padding = '1.8rem 6rem';
+            // document.querySelector('.filters').style.top = '6.7rem';
+            deliveryDiningContainerSM.style.display = 'flex';
+        }
     }
     else {
-        dishContainer.style.display = 'none';
-        document.querySelector('.filters').style.padding = '1.8rem 6rem';
-        document.querySelector('.filters').style.top = '6.7rem';
-        deliveryDiningContainerSM.style.display = 'flex';
+        if (scrollPosition > 150) {
+            console.log('SW ', screenWidth);
+            dishContainer.style.display = 'block';
+            // document.querySelector('.filters').style.padding = '0rem 5.3rem 0.5rem 6rem';
+            document.querySelector('.filters').style.padding = '1rem 6rem';
+            document.querySelector('.filters').style.top = '4.8rem';
+            deliveryDiningContainerSM.style.display = 'none';
+        }
+        else {
+            dishContainer.style.display = 'none';
+            document.querySelector('.filters').style.padding = '1.5rem 6rem';
+            document.querySelector('.filters').style.top = '4.5rem';
+            deliveryDiningContainerSM.style.display = 'flex';
+        }
     }
 })
 
-var screenWidth = window.innerWidth || document.documentElement.clientWidth;
+// var dishContainer = document.querySelector('.dish-sm');
+// var deliveryDiningContainerSM = document.querySelector('.delivery-dining-container-sm')
+// var scrollPosition1 = window.scrollY;
 
-if (screenWidth <= 600) {
-    var dishContainer = document.querySelector('.dish-sm');
-    var deliveryDiningContainerSM = document.querySelector('.delivery-dining-container-sm')
-    var scrollPosition = window.scrollY;
-    if (scrollPosition > 150) {
-        dishContainer.style.display = 'block';
-        document.querySelector('.filters').style.padding = '0rem 5.3rem 0.5rem 0.3rem';
-        document.querySelector('.filters').style.top = '2.7rem';
-        deliveryDiningContainerSM.style.display = 'none';
-    }
-    else {
-        dishContainer.style.display = 'none';
-        document.querySelector('.filters').style.padding = '0.8rem 6rem';
-        document.querySelector('.filters').style.top = '2.7rem';
-        deliveryDiningContainerSM.style.display = 'flex';
-    }
-}
+// }
 
 
 // location code