Update templates/menu.html

templates/menu.html

@@ -280,26 +280,28 @@ h3 {
 }
 
   </style> -->
-  <style>
-    /* Menu item images and card styling */
+<style>/* Menu item images and card styling */
 .menu-card {
     max-width: 100%;
-    border-radius: 10px; /* Reduced border radius */
+    border-radius: 10px; /* Border radius for rounded corners */
     overflow: hidden;
     background-color: #fff;
     margin: auto;
-    padding: 10px; /* Reduced padding */
+    padding: 10px; /* Padding around the card */
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
 
 .menu-image {
-    height: 150px; /* Decreased the height of the image */
-    width: 100%;
-    object-fit: contain; /* Ensure the image fits fully without being cut */
-    border-radius: 10px 10px 0 0; /* Slightly smaller radius */
+    height: 200px; /* Increased the height of the image */
+    width: 100%; /* Ensures the image takes up the full width */
+    object-fit: cover; /* Changed from 'contain' to 'cover' for full coverage */
+    border-radius: 10px 10px 0 0; /* Slightly smaller radius for the top corners */
 }
 
 .card-body {
-    padding: 10px; /* Reduced padding for card body */
+    padding: 10px; /* Padding for the content area inside the card */
 }
 
 /* Responsive grid for 3 columns */
@@ -319,8 +321,7 @@ h3 {
     font-size: 1.1rem; /* Slightly smaller font size */
     font-weight: bold;
 }
-+
-  </style>
+</style>
 </head>
 
   <div class="container mt-4">
@@ -360,7 +361,7 @@ h3 {
     {% else %}
         <!-- Menu Items in 3 Columns -->
         <div class="container mt-4">
-            <h1 class="text-center">Menu</h1>
+            <!-- <h1 class="text-center">Menu</h1> -->
             <div class="row">
                 {% for section, items in ordered_menu.items() %}
                     <h3 class="col-12">{{ section }}</h3>