Make photo scan page mobile friendly

hernihistorie · Jan 27, 2024 · bf918d9 · bf918d9
1 parent 8905818
commit bf918d9
Showing 1 changed file with 29 additions and 1 deletion.
diff --git a/src/routes/gallery/emil-fafek/+page.svelte b/src/routes/gallery/emil-fafek/+page.svelte
@@ -64,7 +64,8 @@
     .thumbnails {
         display: flex;
         flex-wrap: wrap;
-        gap: 4px;
+        gap:  8px 12px;
+        justify-content: center;
     }
     .thumbnail {
         width: 250px;
@@ -77,4 +78,31 @@
         position: absolute;
         right: 0;
     }
+
+    @media only screen and (max-width: 560px) {
+        .thumbnail {
+            width: 200px;
+            height: 200px;
+        }
+    }
+
+    @media only screen and (max-width: 470px) {
+        .thumbnails {
+            display: flex;
+            flex-wrap: wrap;
+            gap:  2px 4px;
+        }
+        .thumbnail {
+            width: 180px;
+            height: 180px;
+        }
+    }
+
+
+    @media only screen and (max-width: 420px) {
+        .thumbnail {
+            width: 150px;
+            height: 150px;
+        }
+    }
 </style>