Merge pull request #105 from ash413/picture-dimensions-css

idna001 · Nov 2, 2024 · 4e4bd6d · 4e4bd6d
2 parents e40eed3 + 1ee5180
commit 4e4bd6d
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 30 deletions.
diff --git a/src/App.css b/src/App.css
@@ -24,16 +24,6 @@ button:hover {
   grid-gap: 20px;
 }
 
-@media screen and (max-width: 600px) {
-  .card-grid {
-    margin-top: 40px;
-    margin-left: 5px;
-    margin-right: 5px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-gap: 10px;
-  }
-}
 
 #theme-toggle{
   position: absolute;
@@ -77,4 +67,31 @@ div.animation {
   }
 }
 
+/*Responsive design */
+@media screen and (max-width: 800px) {
+  .card-grid {
+    margin-top: 40px;
+    margin-left: 5px;
+    margin-right: 5px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+}
 
+@media screen and (max-width: 600px) {
+  .card-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 5px;
+  }
+}
+
+@media screen and (max-width: 390px) {
+  .card-grid{
+    display: grid;
+    grid-template-columns: 1fr;
+    align-items: center;
+    align-content: center;
+  }
+}
diff --git a/src/components/SingleCard.css b/src/components/SingleCard.css
@@ -1,5 +1,7 @@
 .card {
     position: relative;
+    display: grid;
+    place-items: center;
 }
 .card img {
     display: block;
@@ -9,6 +11,8 @@
 
 .card .front-container {
     display: flex;
+    justify-content: center;  /* Center the content horizontally */
+    align-items: center;      /* Center the content vertically */
 }
 
 .card .front {
@@ -17,24 +21,7 @@
     background-color: fff;
     position: absolute;
 }
-@media screen and (max-width: 800px) {
-    .card .front {
-        object-fit: unset;
-        position: absolute;
-    }
-    .front-background {
-        object-fit: scale-down;
-        border: unset !important;
-        filter: unset;
-        display: none;
-    }
-    .card img {
-        display: block;
-        border: 2px solid #fff;
-        border-radius: 6px;
-        width: 100px;
-    }
-}
+
 .front-background {
     object-fit: cover;
     width: 200px;
@@ -43,8 +30,10 @@
 }
 
 .flipped .front {
-    transform: rotateY(0deg);
- }
+    transform: rotateY(0deg) translateX(0);  /* Keep translateX(0) to avoid horizontal shift */
+    margin: 0 auto;  /* Ensure margins don't cause shifting */
+
+}
 
 .card .back {
     transition: all ease-in  0.2s;
@@ -54,4 +43,28 @@
 .flipped .back {
     transform: rotateY(90deg);
     transition-delay: 0s;
+}
+
+/*Responsive design*/
+@media screen and (max-width: 800px) {
+    .card .front {
+        object-fit: unset;
+        position: absolute;
+    }
+    .front-background {
+        object-fit: scale-down;
+        border: unset !important;
+        filter: unset;
+        display: none;
+    }
+    .card {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    .card img {
+        display: block;
+        border: 2px solid #fff;
+        border-radius: 6px;
+        width: 90%;
+    }
 }