Product css updated

Souviksamanta34 · Oct 7, 2024 · f63a61e · f63a61e
1 parent 14fa3eb
commit f63a61e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/src/Home.css b/src/Home.css
@@ -13,14 +13,12 @@
   max-height: max-content;
 }
 
-
 /* Row container */
 .home__row {  
   display: flex; 
   justify-content: space-between;
   align-items: center; 
   z-index: 1; 
-  flex-wrap: nowrap;
   width: 100%; 
   max-width: 1500px; 
 }
@@ -35,19 +33,19 @@
 
 .product {
   width: 100%; 
-  max-width: 2000px; 
-  height: 500px; 
+  max-width: 100%; 
+  height: 500px; /* Default height for large screens */
   margin: 0 auto; 
 }
 
 /* Image */
 .home__image {
-width: calc(100% - 18px);
-z-index: -1;
-margin-left: 10px;
-margin-top: 40px;
-height: auto;
-border-radius: 8px;
+  width: calc(100% - 18px);
+  z-index: -1;
+  margin-left: 10px;
+  margin-top: 40px;
+  height: auto;
+  border-radius: 8px;
 }
 
 @media only screen and (max-width: 768px) {
@@ -66,11 +64,20 @@ border-radius: 8px;
   .home__row {
     flex-direction: column; 
     align-items: center;
+    width: 100%; 
+    max-width: 100%; /* Fit content within screen width */
   }
 
   .home__image {
     width: 100%;
     margin-left: 0;
-    height: auto;
+    height: fit-content;
+  }
+
+  .product {
+    width: 100%; 
+    max-width: 100%; /* Ensure product container fits within the screen */
+    height: 700px; /* Increased height for smaller screens */
+    margin: 0 auto; 
   }
-}
+}
diff --git a/src/Product.css b/src/Product.css
@@ -67,7 +67,7 @@
 @media (max-width: 480px) {
   .product {
     margin: 5px; /* Further reduce margin on very small screens */
-    max-height: 250px; /* Adjust maximum height for extra small screens */
+    max-height: 370px; /* Adjust maximum height for extra small screens */
   }
 
   .product > button {