Merge pull request #370 from celestiaorg/feature/lotti-anim-fix

lotti anim fix
celestiaorg · Feb 14, 2024 · 3dbbf6b · 3dbbf6b
2 parents 30d80db + 1476c1f
commit 3dbbf6b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/src/components/sections/two-column-h2.js b/src/components/sections/two-column-h2.js
@@ -42,8 +42,8 @@ const TwoColumnH2 = ({
 			<div className={"row align-items-center"}>
 
 				<div className={`col col-12 col-lg-6 anim-col ${animVersion === 2 && 'px-2'} ${direction === "rtl" ? "order-lg-2" : "order-lg-1"}`}>
-					{anim && <Lottie lottieRef={lottieRef} animationData={anim} loop={false} autoplay={false}
-									 renderer={"canvas"} style={{width: animVersion === 2 ? 680 : 700, height: animVersion ? 450 : 450}}
+					{anim && <Lottie className={`lottie-anim-${animVersion}`} lottieRef={lottieRef} animationData={anim} loop={false} autoplay={false}
+									 renderer={"canvas"}
 					/>}
 					{!anim && <Image alt={title} filename={image} />}
 				</div>

diff --git a/src/scss/sections/two-column-h2-section.scss b/src/scss/sections/two-column-h2-section.scss
@@ -65,3 +65,32 @@
 		}
 	}
 }
+
+.anim-col{
+	.lottie-anim-1{
+		width:700px;
+		height:450px;
+
+		@media (max-width: 1380px) {
+			width:100%;
+			height:unset;
+
+			canvas{
+				max-width:100%;
+			}
+		}
+	}
+	.lottie-anim-2{
+		width:680px;
+		height:450px;
+
+		@media (max-width: 1380px) {
+			width:100%;
+			height:unset;
+
+			canvas{
+				max-width:100%;
+			}
+		}
+	}
+}