Add more media query steps for small-screen devices.

2024-06-15 17:48:45 +08:00
parent b39c3499c3
commit 37f035709d
8 changed files with 75 additions and 20 deletions
@@ -15,7 +15,18 @@ import DefaultLayout from '../../../layouts/DefaultLayout.astro';
 </DefaultLayout>

 <style>
+  :global(@media screen and (max-width: 768px)) {
+    .collection-desc-item {
+      width: 100%;
+    }
+  }
+  :global(@media screen and (min-width: 768px)) {
+    .collection-desc-item {
+      width: 50%;
+      float: left;
+    }
+  }
  .options {
-    margin: 1em 0 0 0;
+    margin: 0.5em 0 0 0;
  }
 </style>