Make index responsive

2025-02-20 12:32:36 +01:00
parent 69c639f5db
commit 5e1612774a
3 changed files with 34 additions and 0 deletions
@@ -63,3 +63,35 @@ h1 {
 footer {
  text-align: center;
 }
+
+@media (max-width: 90em) {
+  .container {
+    width: 65em;
+  }
+}
+
+@media (max-width: 68em) {
+  .container {
+    width: 43em;
+  }
+}
+
+@media (max-width: 46em) {
+  .container {
+    width: auto;
+    margin: 2em 1em;
+  }
+
+  .photo-cards {
+    display: block;
+  }
+  
+  .photo-card-image img {
+    width: 100%;
+    height: auto;
+  }
+
+  .photo-card + .photo-card {
+    margin-top: 1em;
+  }
+}