fix swiper styles

Signed-off-by: Sudhanshu Dasgupta <[email protected]>
layer5io · Oct 4, 2024 · 8697b7a · 8697b7a
1 parent 2b24e38
commit 8697b7a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/src/components/UpcomingEventCard/EventCard.style.js b/src/components/UpcomingEventCard/EventCard.style.js
@@ -14,6 +14,10 @@ const UpcomingEventsWrapper = styled.div`
 		overflow: auto;
 		transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
 	}
+
+	.swiper-wrapper{
+		height: 38rem
+	}
 	.blog-slider_img{
 		max-height: 25rem; 
 		object-fit: cover;

diff --git a/src/components/UpcomingEventCard/index.js b/src/components/UpcomingEventCard/index.js
@@ -19,7 +19,7 @@ const UpcomingEvents = ({ data }) => {
         }} className="blog-slider__wrp swiper-wrapper">
 
           <Swiper
-            spaceBetween={100}
+            spaceBetween={50}
             slidesPerView={1}
             modules={[Mousewheel, Pagination]}
             pagination={{ clickable: true }}

diff --git a/src/sections/Learn/Service-Mesh-Labs/index.js b/src/sections/Learn/Service-Mesh-Labs/index.js
@@ -54,7 +54,7 @@ const ServiceMeshLabs = ({ selectedIndex, setSelectedIndex }) => {
             </TabList>
             {data.map(({ id, courseLink, scenarios }) => (
               <TabPanel className="content" key={id}>
-                <Row className="row-wrapper">
+                <Row style={{ flexDirection: "column" }} className="row-wrapper">
                   {scenarios.map(({ subId, title, cover, info, embed, link }) => (
                     <Col {...content && ID === subId ? { xs: 12, sm: 12, lg: 12 } : { xs: 12, sm: 6 }} key={subId}>
                       <ScenarioCard