med

TheAnkushshah · Apr 28, 2024 · 0b8adb8 · 0b8adb8
1 parent c9acf5d
commit 0b8adb8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/media-queries-about.css b/media-queries-about.css
@@ -141,8 +141,9 @@
     justify-content: space-around;
   }
   .card{
-    width: 1080px;
-    height: 600px;
+    width: 47%; /* Make the cards occupy full width on smaller screens */
+    max-width: none; /* Reset max-width */
+    height: 650px;
     perspective: 1000px;
     padding-bottom: 55px;
   }
@@ -169,13 +170,15 @@
     border-radius: 10px;
     transform: rotateY(0deg);
     background-size: cover;
+    background-position: bottom;
   }
   .card-back2{
     background: url(AboutPage/Missonback.png);
     border: 1px solid #d8d8d8;
     border-radius: 10px;
     transform: rotateY(180deg);
     background-size: contain;
+    background-position: center;
   }
   .card-front3,
   .card-back3{
@@ -186,13 +189,15 @@
   }
   .card-front3{
     background: url(AboutPage/Vision.png);
+    background-position: revert;
     border: 1px solid #d8d8d8;
     border-radius: 10px;
     transform: rotateY(0deg);
     background-size: cover;
   }
   .card-back3{
     background: url(AboutPage/Visionback.png);
+    background-position: center;
     border: 1px solid #d8d8d8;
     border-radius: 10px;
     background-size: contain;
@@ -385,8 +390,9 @@
     justify-content: space-around;
   }
   .card{
-    width: 1080px;
-    height: 600px;
+    width: 47%; /* Make the cards occupy full width on smaller screens */
+    max-width: none; /* Reset max-width */
+    height: 650px;
     perspective: 1000px;
     padding-bottom: 120px;
   }
@@ -412,13 +418,15 @@
   }
   .card-front{
     background: url(AboutPage/Information.png);
+    background-position: center;
     border: 1px solid #d8d8d8;
     border-radius: 10px;
     transform: rotateY(0deg);
     background-size: cover;
   }
   .card-back{
     background: url(AboutPage/Details.png);
+    background-position: center;
     border: 1px solid #d8d8d8;
     border-radius: 10px;
     background-size: cover;
@@ -433,13 +441,15 @@
   }
   .card-front1{
     background: url(AboutPage/Information1.png);
+    background-position: center;
     border: 1px solid #d8d8d8;
     background-size: cover;
     border-radius: 10px;
     transform: rotateY(0deg);
   }
   .card-back1{
     background: url(AboutPage/Details1.png);
+    background-position: center;
     border: 1px solid #d8d8d8;
     background-size: cover;
     border-radius: 10px;

diff --git a/style.css b/style.css
@@ -971,8 +971,8 @@ ul li a{
   justify-content: space-around;
 }
 .card{
-  width: 750px;
-  height: 400px;
+  width: 100%; /* Adjusted to take 30% of the container's width */
+  height: 400px; /* Adjusted to auto height */
   perspective: 1000px;
 }
 .card-inner{
@@ -996,13 +996,15 @@ ul li a{
   background: url(AboutPage/Mission.png);
   border: 1px solid #d8d8d8;
   border-radius: 10px;
+  background-position: center;
   transform: rotateY(0deg);
 }
 .card-back2{
   background: url(AboutPage/Missonback.png);
   border: 1px solid #d8d8d8;
   border-radius: 10px;
   transform: rotateY(180deg);
+  background-position: center;
 }
 .card-front3,
 .card-back3{
@@ -1016,12 +1018,14 @@ ul li a{
   border: 1px solid #d8d8d8;
   border-radius: 10px;
   transform: rotateY(0deg);
+  background-position: center;
 }
 .card-back3{
   background: url(AboutPage/Visionback.png);
   border: 1px solid #d8d8d8;
   border-radius: 10px;
   transform: rotateY(180deg);
+  background-position: center;
 }
 /*--Section 2nd CSS Ends--*/