update images for mobile

kharizzakaye · Sep 17, 2024 · 5daf906 · 5daf906
1 parent 8edac2b
commit 5daf906
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 26 deletions.
diff --git a/css/style.css b/css/style.css
@@ -20,6 +20,7 @@ h1 {
     color: hsl(14, 65%, 9%);
 }
 
+/* Desserts */
 .dessert-item-card {
     position: relative;
 }
@@ -69,14 +70,12 @@ h1 {
 
 }
 
-
-
 .add-cart-btn:hover {
     border-color: hsl(14, 86%, 42%);
     background-color: hsl(14, 86%, 42%);
 }
 
-
+/* Cart - sidebar */
 .cart-section-card {
     border: none;
 }
@@ -102,22 +101,105 @@ h1 {
     display: none;
 }
 
-/* 
-#dessertImage {
-    border: none;
-}
-
-#dessertsTitle {
-    font-weight: 700;
-}
-
-
-
-
-.dessertDetails {
-    margin: 0px;
-}
-
-.dessertThumbnail {
-    width: 100%;
-} */
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) {
+
+}
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) {
+
+}
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+
+}
+
+/* X-Large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+    h1 {
+        font-weight: 700;
+        font-style: normal;
+        margin-bottom: 30px;
+    }
+
+    /* Desserts */
+    .dessert-item-card {
+        position: relative;
+    }
+
+    .add-cart-btn-container {
+        position: absolute;
+        width: 100%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .dessert-image {
+        border-radius: 15px;
+    }
+
+    .add-cart-btn {
+        border-radius: 25px;
+        padding: 8px 25px 8px 25px;
+        font-weight: 600;
+    }
+
+    .dessert-details {
+        margin: 0px;
+    }
+
+    .food-type {
+        font-weight: 400;
+        margin-top: 40px;
+    }
+
+    .food-name {
+        font-weight: 700;
+        font-size: 17px;
+    }
+
+    .food-price {
+        font-weight: 600;
+        font-size: 17px;
+    }
+
+    .add-cart-btn-container {
+        margin-bottom: 20px;
+
+    }
+
+    .add-cart-btn:hover {
+
+    }
+
+    /* Cart - sidebar */
+    .cart-section-card {
+        border: none;
+    }
+
+    #empty-cart-image {
+        margin-top: 30px;
+        margin-bottom: 20px;
+    }
+
+    #empty-cart-text {
+        font-weight: 600;
+    }
+
+    .cart-main-title {
+        font-weight: 700;
+        font-size: 20px;
+    }
+
+    #confirm-order-btn {
+        border-radius: 25px;
+        display: none;
+    }
+}
+
+/* XX-Large devices (larger desktops, 1400px and up) */
+@media (min-width: 1400px) {
+
+}
diff --git a/index.html b/index.html
@@ -3,9 +3,8 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Document</title>
+        <title>Desserts</title>
 
-
         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
         <link rel="stylesheet" href="/css/style.css">
     </head>
@@ -29,7 +28,7 @@ <h1>Desserts</h1>
                             <div class="text-center" id="empty-cart-image">
                                 <img src="/assets/images/illustration-empty-cart.svg" alt="">
                             </div>
-                            
+
                             <p class="card-text text-center" id="empty-cart-text">Your added items will appear here</p>
 
                             <div class="text-center">

diff --git a/javascript/scripts.js b/javascript/scripts.js
@@ -109,7 +109,10 @@ data.forEach( dessert => {
             id=${dessert.name.replace(/ /g, '-').toLowerCase()}-card
         >
             <div>
-                <img class="dessert-image img-fluid" src="${dessert.image.desktop}" alt="Image of ${dessert.name}" />
+                <picture >
+                    <source media="(max-width: 576px)" srcset="${dessert.image.mobile}">
+                    <img class="dessert-image img-fluid" src="${dessert.image.desktop}" alt="Image of ${dessert.name}">
+                </picture>
             </div>
 
             <div class="add-cart-btn-container text-center">