Fixed carousel

fixed problem with carousel component
RocketChat · Jan 3, 2023 · 549d4a7 · 549d4a7
1 parent 75fc534
commit 549d4a7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/app/components/newscarousel.js b/app/components/newscarousel.js
@@ -58,6 +58,7 @@ const Item = (props) => {
           height={140}
           src={props.item.attributes.imageUrl}
           alt={props.item.attributes.name}
+          className={styles.imgItm}
         />
         <div className={`p-2 p-md-3 h-auto + ${styles.content}`}>
           <h2 className={`${styles.heading}`}>{props.item.attributes.name}</h2>
@@ -98,6 +99,13 @@ function Newscarousel(props) {
               initialSlide: 2,
             },
           },
+          {
+            breakpoint: 300,
+            settings: {
+              slidesToShow: 1,
+              slidesToScroll: 1
+            },
+          }
         ]}
         prevArrow={<PrevArrow />}
         nextArrow={<NextArrow />}

diff --git a/app/styles/Newscarousel.module.css b/app/styles/Newscarousel.module.css
@@ -36,3 +36,18 @@
 .carousel-item-title {
   font-size: 22.5px;
 }
+
+.imgItm{
+  width: 100%;
+  height: 100%;
+}
+
+.content{
+  height: 120px !important;
+}
+
+@media only screen and (max-width: 300px) {
+  .content{
+    height: 80px !important;
+  }
+}