minor styling

Author: esthersoftwaredev

angular-primeng-app/src/app/components/posts/posts.component.scss

@@ -1,5 +1,5 @@
 .posts-view {
-  width: 70vw;
+  width: 80vw;
   min-height: 67.2vh;
   padding: 0.5rem 0;
 
@@ -12,6 +12,10 @@
     .post-card {
       display: flex;
     }
+
+    .card-title {
+      min-height: 3.5rem;
+    }
   }
 
   .load-more-posts {

angular-primeng-app/src/app/components/series/series.component.scss

@@ -1,5 +1,5 @@
 .series-view {
-  width: 70vw;
+  width: 80vw;
   min-height: 67.2vh;
   padding: 0.5rem 0;
 

angular-primeng-app/src/styles.scss

@@ -7,7 +7,7 @@ a {
 }
 
 .post-card {
-  width: 20vw;
+  width: 23vw;
   margin: 1rem;
   cursor: pointer;
 
@@ -18,12 +18,14 @@ a {
 
   .p-card {
     height: 100%;
+    width: 100%;
   }
 
   .p-card-title {
-    font-size: 1.1rem;
+    font-size: 1rem;
     line-height: 1.7rem;
     font-weight: 500;
+    min-height: 3.5rem;
   }
 
   .p-card-content {
@@ -33,7 +35,7 @@ a {
 
 .card-image {
   width: 100%;
-  height: 10rem;
+  height: 12rem;
   overflow: hidden;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
@@ -92,6 +94,10 @@ article {
     }
   }
 
+  .p-card-title {
+    min-width: 75vw;
+  }
+
   // !important statement shall only be used if there are no alternatives, like in this case for overwriting very persistent styles set by PrimeNG
 
   app-follow-dialog {