diff --git a/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx b/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx index 543cc423..1dff6d64 100644 --- a/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx +++ b/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx @@ -63,9 +63,10 @@ export function Carousel(props) { const style = { height: "13em", backgroundSize: "cover", + backgroundPosition: "center", backgroundBlendMode: "screen", - clipPath: "polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%)", - backgroundImage: `linear-gradient(45deg,rgba(255, 0, 90, 1) 0%,rgba(10, 24, 61, 1) 90%),url(${item.link})`, + backgroundImage: `linear-gradient(45deg,rgba(255, 0, 90, 1) 0%, + rgba(10, 24, 61, 1) 90%), url(${item.imageUrl[0]})`, }; return style; }); @@ -74,11 +75,11 @@ export function Carousel(props) { const style = { height: "13em", backgroundSize: "cover", + backgroundPosition: "center", backgroundBlendMode: "screen", - clipPath: "polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%)", backgroundImage: `linear-gradient(45deg, #4e4376 0%, - #2b5876 90%),url(${item.link})`, + #2b5876 90%),url(${item.imageUrl[0]})`, }; return style; }); @@ -149,13 +150,13 @@ export function Carousel(props) { handleOpen(item.content, item.title, item.imageUrl[0], item?.link) } > -
- +

{item.title}

+ dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(truncatedContent(item.content, 170)),}} />
))} diff --git a/frontend/src/pages/Broadcast/Component/Carousel/carousel.module.scss b/frontend/src/pages/Broadcast/Component/Carousel/carousel.module.scss index 150d9b18..279c9e7c 100644 --- a/frontend/src/pages/Broadcast/Component/Carousel/carousel.module.scss +++ b/frontend/src/pages/Broadcast/Component/Carousel/carousel.module.scss @@ -29,7 +29,7 @@ .slide-card { position: relative; - min-height: 31em; + height: 31em; min-width: 20em; border-radius: 15px; margin: 30px; @@ -65,7 +65,6 @@ .card-text { line-height: 1.4; padding: 1em; - padding-top: 2em; text-align: justify; text-justify: distribute-all-lines; font-size: 14px;