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

fix: scale mobile anims
celestiaorg · Feb 16, 2024 · 7b0383f · 7b0383f
2 parents 4f457d2 + 09dd9f1
commit 7b0383f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/components/sections/two-column-h2.js b/src/components/sections/two-column-h2.js
@@ -42,7 +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 className={`lottie-anim-${animVersion}`} lottieRef={lottieRef} animationData={anim} loop={false} autoplay={false}
+					{anim && <Lottie
+						resizeMode="cover" className={`lottie-anim-${animVersion}`} lottieRef={lottieRef} animationData={anim} loop={false} autoplay={false}
 									 renderer={"canvas"}
 					/>}
 					{!anim && <Image alt={title} filename={image} />}

diff --git a/src/scss/sections/two-column-h2-section.scss b/src/scss/sections/two-column-h2-section.scss
@@ -79,6 +79,12 @@
 				max-width:100%;
 			}
 		}
+
+		@include media-breakpoint-down(sm) {
+			transform: scale(1.5);
+			transform-origin: center !important;
+			margin-bottom:30px;
+		}
 	}
 	.lottie-anim-2{
 		width:680px;
@@ -92,6 +98,12 @@
 				max-width:100%;
 			}
 		}
+
+		@include media-breakpoint-down(sm) {
+			transform: scale(1.5);
+			transform-origin: center !important;
+			margin-bottom:30px;
+		}
 	}
 }