Update templates/menu.html

templates/menu.html

@@ -240,7 +240,7 @@
         }
 
     </style> -->
-  <style>
+  <!-- <style>
     /* Menu item images and card styling */
 .menu-card {
     max-width: 100%;
@@ -279,6 +279,47 @@ h3 {
     font-weight: bold;
 }
 
+  </style> -->
+  <style>
+    /* Menu item images and card styling */
+.menu-card {
+    max-width: 100%;
+    border-radius: 10px; /* Reduced border radius */
+    overflow: hidden;
+    background-color: #fff;
+    margin: auto;
+    padding: 10px; /* Reduced padding */
+}
+
+.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 */
+}
+
+.card-body {
+    padding: 10px; /* Reduced padding for card body */
+}
+
+/* Responsive grid for 3 columns */
+@media (min-width: 768px) {
+    .menu-card {
+        max-width: 100%;
+    }
+    .col-md-4 {
+        flex: 0 0 30%; /* Reduced the width of each card */
+        max-width: 30%;
+    }
+}
+
+/* Adjusting the appearance of the category and section headers */
+h3 {
+    margin-top: 20px;
+    font-size: 1.1rem; /* Slightly smaller font size */
+    font-weight: bold;
+}
++
   </style>
 </head>