Update templates/menu.html

templates/menu.html

@@ -19,7 +19,7 @@
 .container {
     max-width: 900px;
 }
-.menu-card {
+/* .menu-card {
     max-width: 350px;
     border-radius: 15px;
     overflow: hidden;
@@ -28,13 +28,36 @@
     display: flex;
     flex-direction: column;
     position: relative;
+} */
+
+.menu-card {
+    max-width: 500px; /* Increased from 350px */
+    width: 100%; /* Optional: ensures it scales with parent */
+    min-width: 400px; /* Optional: sets a minimum size */
+    border-radius: 15px;
+    overflow: hidden;
+    background-color: #fff;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    position: relative;
 }
-.menu-image {
+
+
+.menu-card .menu-image {
     height: 200px; /* Fixed height */
     width: 100%; /* Full width of the card */
-    object-fit:fill; /* Ensure the image covers the area and maintains the aspect ratio */
+    object-fit: cover; /* Ensures the image covers the area and maintains the aspect ratio */
     border-radius: 15px 15px 0 0; /* Rounded top corners */
 }
+
+     
+/* .menu-image {
+    height: 200px; /* Fixed height */
+    width: 100%; /* Full width of the card */
+    object-fit:fill; /* Ensure the image covers the area and maintains the aspect ratio */
+    border-radius: 15px 15px 0 0; /* Rounded top corners */
+} */
 .card-title {
     font-size: 1.2rem;
     font-weight: bold;