Blog: make post listings mobile responsive

src/pages/meow.astro

@@ -21,7 +21,7 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
             style="font-family: var(--font-title);">
             Kuro Pics!
         </h1>
-        <p class="text-center mb-4 text-xl">
+        <p class="text-center m-4 text-xl">
             This is Kuro. She's about 6 years old. She likes squishy things,
             like extra towels on the bed.
         </p>

src/styles/post-listing.css

@@ -5,9 +5,16 @@
  * The parent <main> must have a class called ".post-listing"
  *
  */
-main.post-listing {
+@media (min-width: 980px) {
-    width: 960px;
+    main.post-listing {
-    margin: auto;
+        width: 960px;
+        margin: auto;
+    }
+}
+@media not (min-width: 980px) {
+    main.post-listing {
+        margin: 30px;
+    }
 }
 main.post-listing ul {
     display: flex;