css card alignment issue #1001 (#1005)

* css card alignment issue #1001 * bug-issue-1001 alignment issue * style: format --------- Co-authored-by: Narayan soni <[email protected]>
narayan954 · Aug 1, 2023 · d2a3820 · d2a3820
1 parent 2146c86
commit d2a3820
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 9 deletions.
diff --git a/src/components/Post/ImgBox.jsx b/src/components/Post/ImgBox.jsx
@@ -37,17 +37,22 @@ const ImgBox = ({
       )}
 
       <div className={caption.length ? "p-0" : "post__text"}>
-        {caption && postHasImages && caption.length >= 200 ? (
-          <p style={{ color: "var(--color)", paddingInline: "8px" }}>
+        {caption && postHasImages ? (
+          <p
+            className={`${
+              caption.length >= 200 ? "postCaption" : "postCaptiontext"
+            }`}
+          >
             <ReadMore postId={postId}>{caption}</ReadMore>
           </p>
         ) : (
-          caption &&
-          postHasImages && (
-            <p style={{ color: "var(--color)", paddingInline: "16px" }}>
-              <Caption caption={caption} />
-            </p>
-          )
+          <p
+            style={{
+              color: "var(--color)",
+              paddingInline: "8px",
+              height: "80px",
+            }}
+          ></p>
         )}
       </div>
     </div>

diff --git a/src/components/Post/index.css b/src/components/Post/index.css
@@ -63,7 +63,7 @@
 }
 
 .post__background {
-  min-height: 200px;
+  min-height: 350px;
   background: linear-gradient(
     130deg,
     #dee2ed,
@@ -379,3 +379,17 @@
     font-size: 14px;
   }
 }
+
+.postCaption {
+  color: var(--color);
+  padding-inline: 8px;
+  height: 80px;
+}
+
+.postCaptiontext {
+  color: var(--color);
+  padding-inline: 8px;
+  height: 80px;
+  display: flex;
+  align-items: flex-end;
+}