fix: moon image overflow in mobile

AstraProtocol · Oct 18, 2022 · 5d1933c · 5d1933c
1 parent 15062ad
commit 5d1933c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/views/homepage/Overview.tsx b/views/homepage/Overview.tsx
@@ -51,10 +51,10 @@ const Overview = () => {
 
 	return (
 		<div className={clsx(styles.overview)}>
-			<div className={styles.moon1}>
+			<div className={isMobile ? styles.moon1Mobile : styles.moon1}>
 				<Image alt="moon1" src={'/images/background/moon1.png'} layout="fill" />
 			</div>
-			<div className={styles.moon2}>
+			<div className={isMobile ? styles.moon2Mobile : styles.moon2}>
 				<Image alt="moon2" src={'/images/background/moon2.png'} layout="fill" />
 			</div>
 			<div className="row md-wrap">

diff --git a/views/homepage/style.module.scss b/views/homepage/style.module.scss
@@ -78,6 +78,15 @@
 	z-index: -1;
 }
 
+.moon1Mobile {
+	position: absolute;
+	width: 240px;
+	height: 177px;
+	top: -80px;
+	left: -155px;
+	z-index: -1;
+}
+
 .moon2 {
 	position: absolute;
 	width: 171px;
@@ -86,3 +95,12 @@
 	right: -102px;
 	z-index: -1;
 }
+
+.moon2Mobile {
+	position: absolute;
+	width: 171px;
+	height: 128px;
+	bottom: -80px;
+	right: -10px;
+	z-index: -1;
+}