made it responisve

Anjaliavv51 · Oct 2, 2024 · 4da6b95 · 4da6b95
1 parent ddae397
commit 4da6b95
Showing 1 changed file with 37 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -249,28 +249,36 @@
 .moon{
     transform-origin: 50% 100%;
 }
+
 #about {
     display: flex;
-    flex-wrap: wrap; /* Allow the boxes to wrap to the next line if necessary */
-    gap: 15px; /* Space between the boxes */
-    justify-content: center; /* Center align the items */
+    flex-wrap: wrap; /* Allow boxes to wrap */
+    gap: 20px; /* Space between boxes */
+    justify-content: center; /* Center align items */
 }
 
 .box {
-    background-color:transparent; /* Optional for better visual separation */
+    background-color:transparent; /* Optional for visual separation */
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     display: flex;
-    flex-direction: column; /* Stack the content vertically */
+    flex-direction: column; /* Stack content vertically */
     align-items: center;
-    max-width: 370px; /* Ensures all boxes have the same maximum width */
-    flex: 1 1 300px; /* Allow the boxes to grow and shrink */
-    min-width: 250px; /* Set a minimum width for responsiveness */
+    max-width: 350px; /* Maximum width of each card */
+    flex: 1 1 280px; /* Allow boxes to grow and shrink */
+    min-width: 300px; /* Minimum width for responsiveness */
+    min-height: 480px; /* Minimum height for the card */
 }
 
-.box img {
-    object-fit: cover; /* Ensures the image fills its container without distortion */
+.card-image {
+    width: auto; /* Set width to auto to allow centering */
+    height: auto; /* Maintain aspect ratio */
+    max-width: 100%; /* Ensure image does not exceed card width */
+    max-height: 200px; /* Limit the max height to prevent overflow */
+    object-fit: cover; /* Ensure the image covers the card area without distorting */
+    border-radius: 10px; /* Match border radius of the box */
+    margin: 0 auto; /* Center the image horizontally */
 }
 
 .box h2 {
@@ -279,10 +287,24 @@
 }
 
 p {
-    flex-grow: 1; /* Ensures the paragraph grows to fill the available space */
     text-align: center;
+    margin: 10px 0; /* Add some margin for spacing */
+}
+
+/* Additional responsive adjustments */
+@media (max-width: 600px) {
+    .box {
+        max-width: 100%; /* Allow full width on small screens */
+        min-height: auto; /* Allow height to adjust for smaller screens */
+    }
+
+    .card-image {
+        max-height: 150px; /* Adjust max height for smaller screens */
+    }
 }
 
+
+
 </style>
 </head>
 <body>
@@ -390,25 +412,26 @@ <h1 class="h-primary center" style="font-family: var(--ff-philosopher);font-size
         <!-- changes -->
         <div id="about">
             <div class="box">
-                <img src="Images/biryani.jpg" style=" height: 330px; width: 300px;border-radius: 10px;" alt="">
+                <img src="Images/biryani.jpg" alt="Biryani" class="card-image">
                 <h2 class="h-secondary center" style="font-family:var(--ff-philosopher);">60s-style florals</h2>
                 <p class="center" style="font-family: var(--ff-poppins);">From aromatic curries to flavorful biryanis, our menu showcases the diversity and
                     deliciousness of Indian cuisine.
                 </p>
             </div>
             <div class="box">
-                <img src="Images/plate_mismatch.jpg" alt="" style="border-radius: 10px;height: 330px; width: 300px;">
+                <img src="Images/plate_mismatch.jpg" alt="Plate" class="card-image">
                 <h2 class="h-secondary center" style="font-family: var(--ff-philosopher)">60's Dinning Items</h2>
                 <p class="center" style="font-family: var(--ff-poppins);">
                     Elegant porcelain plates with delicate floral patterns. Each plate tells a story of family gatherings and special occasions.
                 </p>
             </div>
             <div class="box">
-                <img src="Images/candy.jpg" alt="Images/bon-bon candy.jpg" style="border-radius: 10px;height: 330px;width: 300px;">
+                <img src="Images/candy.jpg" alt="Candy" class="card-image">
                 <h2 class="h-secondary center" style="font-family: var(--ff-philosopher);">Whimsical Nostalgia: The Stardust Bonbon</h2>
                 <p class="center" style="font-family: var(--ff-poppins);">The Stardust Bonbon, a sweet relic from an era when the universe was our playground.</p>
             </div>
         </div>
+
     </section>
 
     <section class="service_container" style="background-color: hsl(20, 43%, 93%);">