fix: caption hiding behind image issue (#1283)

* fix: caption hiding behind image issue * fix: inline styling changed to class * fix: div cannot be a child of a <p> tag
narayan954 · Oct 22, 2023 · da652c9 · da652c9
1 parent 9986c1d
commit da652c9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/components/ReadMore/index.css b/src/components/ReadMore/index.css
@@ -7,3 +7,10 @@
 .read__more__less:hover {
   color: rgb(6, 33, 115);
 }
+
+.caption_container {
+  z-Index:1;
+background-color: white;
+opacity: 0.7;
+
+}
diff --git a/src/components/ReadMore/index.jsx b/src/components/ReadMore/index.jsx
@@ -1,3 +1,5 @@
+import "./index.css";
+
 import React, { useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
@@ -18,7 +20,7 @@ const ReadMore = ({ children, postId, picCap = false, readMore = true }) => {
     : text;
 
   return (
-    <>
+    <span className="caption_container">
       <Caption caption={captionText} />
       {text.length >= 40 && (
         <span
@@ -38,7 +40,7 @@ const ReadMore = ({ children, postId, picCap = false, readMore = true }) => {
           {isReadMore ? " ...read more" : " ...show less"}
         </span>
       )}
-    </>
+    </span>
   );
 };