Fix: Mobile view

src/components/Features-carousel/FeaturesCarousel.style.js

@@ -1,10 +1,40 @@
 import styled from "styled-components";
 
 export const FeaturesWrapper = styled.div`
+    overflow: visible;
+    height: auto;
+
     .features-carousel {
+      width: 100%;
+      display:block;
+      min-height: 400px;
+      height: auto;
+      visibility: visible;
+      opacity: 1;
+      overflow: visible;
+
       @media (min-width: 768px) {
        display:none;
       }
+
+      .slick-slider, .slick-list {
+        display: block !important;
+        position: relative;
+        max-height: 400px;
+        visibility: visible;
+      }
+
+      .slick-track, .slick-slide {
+        display: block;
+        min-height: auto;
+        height: auto;
+        visibility: visible;
+      }
+      .slick-slide > div {
+          height: 100%; /* Ensure inner div takes height */
+          min-height: 400px;
+      }
+
       img{
         object-fit:contain;
         margin-left:auto;
@@ -28,6 +58,7 @@ export const FeaturesWrapper = styled.div`
       & .body {
         opacity: 1;
         max-height: unset;
+        overflow: visible;
       }
 
       /* nuka-carousel overrides */
@@ -82,6 +113,7 @@ export const FeaturesWrapper = styled.div`
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
       border-color: ${props => props.theme.grey212121ToBlack};
       padding-top: 0;
+      width: 100%;
       @media (min-width: 768px){
         border-color: ${props => props.theme.grey212121ToBlack};
         background-color: ${props => props.theme.grey212121ToBlack};
@@ -90,17 +122,21 @@ export const FeaturesWrapper = styled.div`
       }
 
       & .body {
-        opacity: 1;
+        opacity: 1 !important;
         font-size: 1rem;
-        max-height: 200px;
+        max-height: 100vh;
+        overflow: visible;
+        color: ${props => props.theme.text};
 
         @media (min-width: 768px){
             color: ${props => props.theme.white};
+            max-height: 200px;
         }
       }
 
       & .heading {
         pointer-events: none;
+        color: ${props => props.theme.text};
         @media (min-width: 768px){
             color: ${props => props.theme.white};
         }
@@ -139,12 +175,13 @@ export const FeaturesWrapper = styled.div`
     }
 
     .terminal-wrapper {
+      width: 100%;
       & > div {
         max-width: 100%;
         @media (max-width: 768px) {
-            maxHeight: 380px;
-            height: 380px;
-            overflow-y:scroll;
+            max-height: none;
+            height: auto;
+            overflow: visible;
         }
       }
 

src/components/Features-carousel/index.js

@@ -7,73 +7,72 @@ import Slider from "react-slick";
 
 
 const Features = ({ features, heading }) => (
-  <>
-    {/* carousel rendered at smaller breakpoints */}
+  <FeaturesWrapper>
     <FeaturesCarousel features={features} heading={heading} />
     <FeaturesList features={features} />
-  </>
+  </FeaturesWrapper>
 );
 
 
 const FeaturesList = ({ features }) => {
   const [activeFeature, setActiveFeature] = useState(0);
   return (
-    <FeaturesWrapper>
-      <div className="features">
-        <ul className="options">
-          {features.map((feature, stableIdx) => (
-            <Feature
-              id={stableIdx}
-              key={stableIdx}
-              title={feature.title}
-              active={stableIdx === activeFeature}
-              onClick={setActiveFeature}
-              learnMoreLink={feature.learnMoreLink}
-            >
-              {feature.description}
-            </Feature>
-          ))}
-        </ul>
-        <div className="terminal-wrapper">
-          <SimpleReactLightbox>
-            <SRLWrapper>
-              {features[activeFeature].content}
-            </SRLWrapper>
-          </SimpleReactLightbox>
-        </div>
+    <div className="features">
+      <ul className="options">
+        {features.map((feature, stableIdx) => (
+          <Feature
+            id={stableIdx}
+            key={stableIdx}
+            title={feature.title}
+            active={stableIdx === activeFeature}
+            onClick={setActiveFeature}
+            learnMoreLink={feature.learnMoreLink}
+          >
+            {feature.description}
+          </Feature>
+        ))}
+      </ul>
+      <div className="terminal-wrapper">
+        <SimpleReactLightbox>
+          <SRLWrapper>
+            {features[activeFeature].content}
+          </SRLWrapper>
+        </SimpleReactLightbox>
       </div>
-    </FeaturesWrapper>
+    </div>
   );
 };
 
 const FeaturesCarousel = ({ features, heading }) => {
   return (
-    <FeaturesWrapper>
-      <div className="features-carousel">
-        <h2 className="main-heading">{heading ? heading : "Features"}</h2>
-        <Slider
-          autoplay={true}
-          autoplaySpeed={3500}
-          arrows={false}
-          dots={true}
-          infinite= {true}
-          speed="500"
-          slidesToShow={1}
-          slidesToScroll={1}
-        >
-          {features.map((feature, stableIdx) => (
-            <div key={stableIdx}>
-              <Feature Element="div" id={feature.id} title={feature.title} active>
-                {feature.description}
-              </Feature>
-              <div className="terminal-wrapper">
-                {features[stableIdx].content}
-              </div>
+    <div className="features-carousel">
+      <h2 className="main-heading">{heading ? heading : "Features"}</h2>
+      <Slider
+        autoplay={true}
+        autoplaySpeed={3500}
+        arrows={false}
+        dots={true}
+        infinite={true}
+        speed={500}
+        slidesToShow={1}
+        slidesToScroll={1}
+        swipe={true}
+        lazyLoad="ondemand"
+        waitForAnimate={false}
+
+      >
+        {features.map((feature, stableIdx) => (
+          <div key={stableIdx}>
+            <Feature Element="div" id={feature.id} title={feature.title} active>
+              {feature.description}
+            </Feature>
+            <div className="terminal-wrapper">
+              {features[stableIdx].content}
             </div>
-          ))}
-        </Slider>
-      </div>
-    </FeaturesWrapper>
+          </div>
+        ))}
+      </Slider>
+    </div>
   );
 };
 
@@ -98,7 +97,7 @@ const Feature = ({ children, title, active, onClick, learnMoreLink, id, Element
           ? learnMoreLink.startsWith("/")
             ? (
               <Link className="learn-more-link" to={learnMoreLink}>
-          Explore <IoIosArrowRoundForward />
+                Explore <IoIosArrowRoundForward />
               </Link>
             )
             : (
@@ -108,7 +107,7 @@ const Feature = ({ children, title, active, onClick, learnMoreLink, id, Element
                 target="_blank"
                 rel="noopener noreferrer"
               >
-          Explore <IoIosArrowRoundForward />
+                Explore <IoIosArrowRoundForward />
               </a>
             )
           : null}    {/* No link rendered if learnMoreLink is empty */}