Update templates/combined_summary.html

templates/combined_summary.html

@@ -83,33 +83,45 @@
         }
 
         /* Mobile Optimization */
-       /* Mobile Optimization */
 @media (max-width: 768px) {
-    .item-section {
-        width: 100%;
+    .reward-status {
+        display: block; /* Make the items stack on top of each other */
         text-align: center;
     }
 
-    .item-image {
+    .item-section {
         width: 100%;
-        max-height: 400px;  /* Use max-height to ensure the image doesn't overflow */
-        object-fit: contain; /* Keep the image's aspect ratio intact */
-        margin: 0 auto;
+        display: flex;
+        flex-direction: column;  /* Ensure items are stacked vertically */
+        align-items: center;  /* Center the content */
+        justify-content: center;
+        margin-bottom: 20px;
     }
 
-    .ingredient {
-        width: 100%;
-        text-align: center;
+    .item-image {
+        width: 100%;  /* Ensure it takes full width */
+        max-height: 400px; /* Limit max height */
+        object-fit: contain;  /* Keep the aspect ratio intact */
     }
 
     .ingredient img {
-        width: 100%;
-        max-height: 200px;  /* Keep height flexible for mobile screens */
-        object-fit: contain; /* Make sure it scales appropriately */
-        border-radius: 15px 15px 0 0;  /* Keep rounded corners */
+        width: 100%;  /* Ensure it takes full width */
+        max-height: 200px;  /* Limit max height */
+        object-fit: contain;  /* Maintain aspect ratio */
+        border-radius: 15px 15px 0 0; /* Rounded top corners */
     }
 }
 
+/* General Image Styles (Desktop and Mobile) */
+.item-image {
+    width: 100%;  /* Ensure image takes full container width */
+    height: auto;  /* Let the height be calculated automatically */
+    max-height: 350px;  /* Limit max height to avoid stretching */
+    object-fit: contain;  /* Keep the aspect ratio intact */
+    border-radius: 8px;
+}
+
+
         @media (min-width: 768px) {
             .item-section {
                 width: 48%;