fix: fixed position of Add/Remove button in md,sm screens

sanidhiya-khandelwal · Dec 20, 2023 · ea3516d · ea3516d
1 parent 30aff29
commit ea3516d
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 38 deletions.
diff --git a/restrauntDetail.css b/restrauntDetail.css
@@ -1023,13 +1023,13 @@ header {
 
 }
 
-@media all and (width<=800px) {
+@media all and (width<=900px) {
     .order-online-options {
         position: static;
     }
 }
 
-@media all and (width<=800px) {
+@media all and (width<=900px) {
     .order-online-dishes {
         padding: 0rem;
     }
@@ -1048,7 +1048,6 @@ header {
 
     .dish-details {
         width: 50%;
-        position: relative;
     }
 
     .dishname {
@@ -1081,10 +1080,9 @@ header {
     /* dish image */
 
     .dish-img-container {
-        width: 45%;
+        width: 40%;
         height: 70%;
-        background-color: hsl(0, 0%, 90%);
-        border-radius: 10px;
+        position: relative;
     }
 
     .dish-img-container img {
@@ -1099,12 +1097,13 @@ header {
         justify-content: space-around;
         width: 8.2rem;
         position: absolute;
-        top: 7.8rem;
-        left: 11.65rem;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: -1rem;
         color: red;
         font-weight: 900;
         background-color: rgb(255, 236, 236);
-        border: 1px solid red;
+        border: 1px solid #ff0000;
     }
 
     .dish-made-from {
@@ -1148,4 +1147,28 @@ header {
     .restaurant-images-container {
         height: 200px;
     }
+}
+
+@media all and (width<=512px) {
+
+    .add-button,
+    .add-remove-button {
+        width: 7rem;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: -0.5rem;
+    }
+}
+
+@media all and (width<=472px) {
+
+    .add-button,
+    .add-remove-button {
+        width: 7rem;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 0.6rem;
+    }
 }
diff --git a/restrauntDetail.html b/restrauntDetail.html
@@ -228,7 +228,17 @@ <h3>Order Online</h3>
                             <div class="dish-container">
                                 <div class="dish-img-container">
                                     <img src="./assets/food/dessert/Rasgulla.avif" alt="dish-img" class="dish-img">
+                                    <div class="add-button">
+                                        <b style="font-weight: 100;">Add</b>
+                                        <p>+</p>
+                                    </div>
+                                    <div class="add-remove-button">
+                                        <p>+</p>
+                                        <b style="font-weight: 100;" class="count">1</b>
+                                        <p style="margin-bottom: 0.3rem;">-</p>
+                                    </div>
                                 </div>
+
                                 <div class="dish-details">
                                     <p class="dishname">thLI</p>
                                     <div class="rating-votes">

diff --git a/restrauntDetail.js b/restrauntDetail.js
@@ -253,9 +253,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
         var screenWidth = window.innerWidth || document.documentElement.clientWidth;
 
-        if (screenWidth <= 800) {
+        if (screenWidth <= 900) {
             var orderOnlineOptionsId = document.getElementById('order-online-options-id');
-            console.log(orderOnlineOptionsId);
             orderOnlineOptionsId.classList.remove('order-online-options');
             orderOnlineOptionsId.classList.add('order-online-options-smallScreen');
 
@@ -325,6 +324,45 @@ document.addEventListener('DOMContentLoaded', function () {
                 dishImage.src = dish.foodImg;
 
                 dishImgContainer.appendChild(dishImage);
+
+
+                // //Add button
+                var addButton = document.createElement('div');
+                addButton.classList.add('add-button');
+
+                var addText = document.createElement('b');
+                // addText.style.fontWeight = '100';
+                addText.textContent = 'Add';
+                addButton.appendChild(addText)
+
+                var addSign = document.createElement('p');
+                addSign.innerText = '+';
+                addButton.appendChild(addSign)
+                dishImgContainer.appendChild(addButton);
+
+                // // Remove button
+                var addRemoveButton = document.createElement('div');
+                addRemoveButton.classList.add('add-remove-button');
+
+                var addSign = document.createElement('p');
+                addSign.innerText = '+';
+                addRemoveButton.appendChild(addSign)
+
+
+                var countText = document.createElement('b');
+                countText.classList.add('count');
+                countText.style.fontWeight = '100';
+                countText.textContent = '1';
+                addRemoveButton.appendChild(countText);
+
+                var subSign = document.createElement('p');
+                subSign.innerText = '-';
+                subSign.style.marginBottom = '0.3rem';
+                addRemoveButton.appendChild(subSign);
+                dishImgContainer.appendChild(addRemoveButton);
+
+
+
                 dishContainer.appendChild(dishImgContainer);
 
                 //dish name
@@ -382,40 +420,40 @@ document.addEventListener('DOMContentLoaded', function () {
                 dishMadeFrom.textContent = dish.foodDescription;
                 dishDetails.appendChild(dishMadeFrom);
 
-                //Add button
-                var addButton = document.createElement('div');
-                addButton.classList.add('add-button');
+                // //Add button
+                // var addButton = document.createElement('div');
+                // addButton.classList.add('add-button');
 
-                var addText = document.createElement('b');
-                // addText.style.fontWeight = '100';
-                addText.textContent = 'Add';
-                addButton.appendChild(addText)
+                // var addText = document.createElement('b');
+                // // addText.style.fontWeight = '100';
+                // addText.textContent = 'Add';
+                // addButton.appendChild(addText)
 
-                var addSign = document.createElement('p');
-                addSign.innerText = '+';
-                addButton.appendChild(addSign)
-                dishDetails.appendChild(addButton);
+                // var addSign = document.createElement('p');
+                // addSign.innerText = '+';
+                // addButton.appendChild(addSign)
+                // dishDetails.appendChild(addButton);
 
-                // Remove button
-                var addRemoveButton = document.createElement('div');
-                addRemoveButton.classList.add('add-remove-button');
+                // // Remove button
+                // var addRemoveButton = document.createElement('div');
+                // addRemoveButton.classList.add('add-remove-button');
 
-                var addSign = document.createElement('p');
-                addSign.innerText = '+';
-                addRemoveButton.appendChild(addSign)
+                // var addSign = document.createElement('p');
+                // addSign.innerText = '+';
+                // addRemoveButton.appendChild(addSign)
 
 
-                var countText = document.createElement('b');
-                countText.classList.add('count');
-                countText.style.fontWeight = '100';
-                countText.textContent = '1';
-                addRemoveButton.appendChild(countText);
+                // var countText = document.createElement('b');
+                // countText.classList.add('count');
+                // countText.style.fontWeight = '100';
+                // countText.textContent = '1';
+                // addRemoveButton.appendChild(countText);
 
-                var subSign = document.createElement('p');
-                subSign.innerText = '-';
-                subSign.style.marginBottom = '0.3rem';
-                addRemoveButton.appendChild(subSign);
-                dishDetails.appendChild(addRemoveButton);
+                // var subSign = document.createElement('p');
+                // subSign.innerText = '-';
+                // subSign.style.marginBottom = '0.3rem';
+                // addRemoveButton.appendChild(subSign);
+                // dishDetails.appendChild(addRemoveButton);
 
                 //all appended
                 dishContainer.appendChild(dishDetails);