Blog: make post listings mobile responsive

2024-01-01 17:45:56 -07:00 · 2024-01-01 17:45:56 -07:00 · bcd362995b
parent f4d8a83d24
commit bcd362995b
1 changed files with 10 additions and 3 deletions
--- a/src/styles/post-listing.css
+++ b/src/styles/post-listing.css
@ -5,9 +5,16 @@
 * The parent <main> must have a class called ".post-listing"
 *
 */
-main.post-listing {
-    width: 960px;
-    margin: auto;
+@media (min-width: 980px) {
+    main.post-listing {
+        width: 960px;
+        margin: auto;
+    }
+}
+@media not (min-width: 980px) {
+    main.post-listing {
+        margin: 30px;
+    }
 }
 main.post-listing ul {
    display: flex;