fix: fixed restaurant detail page styling for width >=900px

sanidhiya-khandelwal · Jan 2, 2024 · cd7b4b5 · cd7b4b5
1 parent 9af9ac9
commit cd7b4b5
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 29 deletions.
diff --git a/restrauntDetail.css b/restrauntDetail.css
@@ -370,11 +370,11 @@ header {
     align-items: center;
     gap: 0.6rem;
     justify-content: center;
-    padding: 0.3rem;
+    padding: 0rem 1rem;
     border: 0.1px solid rgba(0, 0, 0, 0.352);
     border-radius: 9px;
-    height: 2.4rem;
-    width: 9%;
+    height: 2.2rem;
+    width: auto;
     font-size: 0.75rem;
     cursor: pointer;
 }
@@ -430,9 +430,10 @@ header {
 .restaurant-options p {
     font-size: 1.2rem;
     letter-spacing: 1.5px;
-    padding: 1rem 0.6rem;
+    padding: 1rem 0.5rem;
     cursor: pointer;
     color: rgb(156, 156, 156);
+    width: auto;
 }
 
 .order-online {
@@ -1026,6 +1027,17 @@ header {
 
 /* media query */
 
+@media all and (width<=1300px) {
+    .down-arrow img {
+        display: none;
+    }
+
+    .cuisine-name {
+        height: 2.2rem;
+    }
+}
+
+
 @media all and (width<=1100px) {
 
     /* order placed */
@@ -1043,16 +1055,117 @@ header {
     }
 }
 
-@media all and (width<=1300px) {
-    .down-arrow img {
-        display: none;
+@media all and (width<=1020px) {
+
+    /* header */
+    .left-header {
+        gap: 1rem;
     }
 
-    .cuisine-name {
+    .zomato-logo {
+        width: 8rem;
         height: 2.2rem;
     }
+
+    .search-locality {
+        gap: 0.5rem;
+        width: 100%;
+    }
+
+    .location-container {
+        font-size: 0.9rem;
+        gap: 0.3rem;
+
+    }
+
+    .location-container img {
+        width: 1.5rem;
+    }
+
+
+    .dish-container {
+        padding-right: 0rem;
+    }
+
+    .dish-container img {
+        width: 1.5rem;
+    }
+
+    .dish-container input {
+        width: auto;
+    }
+
+    .right-header {
+        width: auto;
+        gap: 1rem;
+    }
+
+    .right-header p {
+        font-size: 1rem;
+    }
+
+    /* for cuisine options */
+    .order-online-options {
+        width: 30%;
+    }
+
+    .order-online-dishes {
+        width: 70%;
+    }
+
+    /*   order-online-heading    */
+    .order-online-heading {
+        height: 2rem;
+    }
+
+    .order-online-heading h3 {
+        font-size: 1.2rem;
+    }
+
+    .order-online-search-container {
+        height: 100%;
+    }
+
+    .track-order {
+        margin-top: 1rem;
+    }
+
+    .track-order-container,
+    .time-container {
+        font-size: 1rem;
+    }
+
+    /* coupons */
+    .coupons-container {
+        width: 40rem;
+    }
+
+    .hungry-coupon,
+    .walletonzom-coupon,
+    .crednew-coupon {
+        border-radius: 5px;
+        box-shadow: rgba(54, 54, 54, 0.06) 0px 1px 2px;
+        background: rgb(17, 85, 203);
+        color: white;
+        padding: 0.5rem;
+        font-size: 0.8rem;
+        line-height: 1.1rem;
+        cursor: pointer;
+    }
+
+
+
 }
 
+
+@media all and (width<=958px) {
+    .restaurant-options {
+        width: 80%;
+    }
+}
+
+
+
 @media all and (width<=900px) {
     .order-online-options {
         position: static;

diff --git a/restrauntDetail.html b/restrauntDetail.html
@@ -29,7 +29,7 @@
                 <div class="dish">
                     <div class="dish-container">
                         <img src="./assets/icons/search (2).png" alt="search-icon">
-                        <input type="text" placeholder="Search for restaurant, cuisine or a dish" class="search-input">
+                        <input type="text" placeholder="Search for cuisine or a dish" class="search-input">
                     </div>
                     <div class="search-dish-container">
                         <!-- <div class="search-restaurant-container-img-details">

diff --git a/restrauntDetail.js b/restrauntDetail.js
@@ -53,26 +53,29 @@ document.addEventListener('DOMContentLoaded', function () {
     restaurantPageTitle.textContent += restaurantName + ', ' + capitalizedCity;
 
     // HIDE DIRECTION SHARE BOOKMARK CONTAINER
-    window.addEventListener('scroll', function () {
-        var directionBookmarkShareContainer = document.querySelector('.direction-bookmark-share-container');
-        // var deliveryDiningContainerSM = document.querySelector('.delivery-dining-container-sm');
-        var scrollPosition = window.scrollY;
-        if (scrollPosition >= 800) {
-            directionBookmarkShareContainer.style.display = 'none';
-            document.querySelector('.restaurant-options-container').style.transform = 'translateY(-0.3rem)'
-            document.querySelector('.restaurant-options-container').style.transition = 'transform 0.1s ease-in';
-            document.querySelector('.restaurant-options-container').style.margin = '0';
-            document.querySelector('.order-online-options').style.top = '9.6rem';
-        }
-        else {
-            directionBookmarkShareContainer.style.display = 'flex';
-            document.querySelector('.restaurant-options-container').style.transform = 'translateY(-0rem)'
-            document.querySelector('.restaurant-options-container').style.transition = 'transform 0.1s ease'
-            document.querySelector('.restaurant-options-container').style.margin = '0 0';
-            document.querySelector('.order-online-options').style.top = '13.6rem';
-        }
-    })
-
+    var screenWidth = window.innerWidth || document.documentElement.clientWidth;
+
+    if (screenWidth >= 900) {
+        window.addEventListener('scroll', function () {
+            var directionBookmarkShareContainer = document.querySelector('.direction-bookmark-share-container');
+            // var deliveryDiningContainerSM = document.querySelector('.delivery-dining-container-sm');
+            var scrollPosition = window.scrollY;
+            if (scrollPosition >= 800) {
+                directionBookmarkShareContainer.style.display = 'none';
+                document.querySelector('.restaurant-options-container').style.transform = 'translateY(-0.3rem)'
+                document.querySelector('.restaurant-options-container').style.transition = 'transform 0.1s ease-in';
+                document.querySelector('.restaurant-options-container').style.margin = '0';
+                document.querySelector('.order-online-options').style.top = '9.6rem';
+            }
+            else {
+                directionBookmarkShareContainer.style.display = 'flex';
+                document.querySelector('.restaurant-options-container').style.transform = 'translateY(-0rem)'
+                document.querySelector('.restaurant-options-container').style.transition = 'transform 0.1s ease'
+                document.querySelector('.restaurant-options-container').style.margin = '0 0';
+                document.querySelector('.order-online-options').style.top = '13.6rem';
+            }
+        })
+    }
 
     // makes search container visible on scroll in small screens
     window.addEventListener('scroll', function () {