added responsive design for posts

2022-01-30 15:07:56 -06:00
parent dda91e5c35
commit 5284452b1f
1 changed files with 21 additions and 0 deletions
--- a/src/features/posts/Post.css
+++ b/src/features/posts/Post.css
@@ -43,6 +43,7 @@ img, video {
 }

 .post-metadata * {
+    display: inline-flex;
    background-color:rgb(250, 206, 248);
    border-color: transparent;
    text-decoration: none;
@@ -85,3 +86,23 @@ img, video {
 .comments-hidden {
    display: none;
 }
+
+/* Queries */
+
+@media only screen and (max-width: 1050px) {        /* for tablets */
+    img, video {
+        max-height: 25rem;
+    }
+    .title {
+        font-size: 1.5rem;
+    }
+    .post-metadata {
+        font-size: 0.8rem;
+        text-align: center;
+        text-overflow: ellipsis;
+    }
+
+    .post-metadata * {
+        max-width: 15%;
+    }
+}