📱 better mobile support for view height (#33)

uwu-labs · Oct 25, 2023 · 98d1ee1 · 98d1ee1
1 parent 80bc1a2
commit 98d1ee1
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 27 deletions.
diff --git a/src/components/Browse.css b/src/components/Browse.css
@@ -1,12 +1,12 @@
 .browse {
   width: 100%;
-  height: 400vh;
+  height: 400dvh;
   position: relative;
 }
 
 .browse-content {
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
   display: absolute;
   top: 0;
   left: 0;

diff --git a/src/components/Community.css b/src/components/Community.css
@@ -1,6 +1,6 @@
 .community {
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
   background: #f4f5f6;
   position: relative;
   overflow: hidden;
@@ -18,7 +18,7 @@
 .community-left-glow {
   position: absolute;
   width: 50%;
-  height: 100vh;
+  height: 100dvh;
   top: 70%;
   left: -12.5%;
   background: #73d7e8;
@@ -29,7 +29,7 @@
 .community-right-glow {
   position: absolute;
   width: 50%;
-  height: 100vh;
+  height: 100dvh;
   top: 70%;
   right: -12.5%;
   background: #73d7e8;
@@ -40,7 +40,7 @@
 .community-top-glow {
   position: absolute;
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
   top: -50%;
   left: 0;
   background: #73d7e8;

diff --git a/src/components/Community.tsx b/src/components/Community.tsx
@@ -232,10 +232,10 @@ const Community = () => {
                 key={firstIndex}
                 className={className}
                 style={{
-                  top: `${uwu.top * 100}vh`,
-                  left: `${uwu.side * 100}vh`,
-                  width: `${uwu.size * 100}vh`,
-                  height: `${uwu.size * 100}vh`,
+                  top: `${uwu.top * 100}dvh`,
+                  left: `${uwu.side * 100}dvh`,
+                  width: `${uwu.size * 100}dvh`,
+                  height: `${uwu.size * 100}dvh`,
                   animationDelay: `${Math.random() * 1}s`,
                 }}
               >
@@ -249,10 +249,10 @@ const Community = () => {
                 key={secondIndex}
                 className={className}
                 style={{
-                  top: `${uwu.top * 100}vh`,
-                  right: `${uwu.side * 100}vh`,
-                  width: `${uwu.size * 100}vh`,
-                  height: `${uwu.size * 100}vh`,
+                  top: `${uwu.top * 100}dvh`,
+                  right: `${uwu.side * 100}dvh`,
+                  width: `${uwu.size * 100}dvh`,
+                  height: `${uwu.size * 100}dvh`,
                   animationDelay: `${Math.random() * 1}s`,
                 }}
               >
@@ -281,10 +281,10 @@ const Community = () => {
                 key={firstIndex}
                 className={className}
                 style={{
-                  top: `${uwu.top * 100}vh`,
-                  left: `${uwu.side * 100}vh`,
-                  width: `${uwu.size * 100}vh`,
-                  height: `${uwu.size * 100}vh`,
+                  top: `${uwu.top * 100}dvh`,
+                  left: `${uwu.side * 100}dvh`,
+                  width: `${uwu.size * 100}dvh`,
+                  height: `${uwu.size * 100}dvh`,
                   animationDelay: `${Math.random() * 1}s`,
                 }}
               >
@@ -298,10 +298,10 @@ const Community = () => {
                 key={secondIndex}
                 className={className}
                 style={{
-                  top: `${uwu.top * 100}vh`,
-                  right: `${uwu.side * 100}vh`,
-                  width: `${uwu.size * 100}vh`,
-                  height: `${uwu.size * 100}vh`,
+                  top: `${uwu.top * 100}dvh`,
+                  right: `${uwu.side * 100}dvh`,
+                  width: `${uwu.size * 100}dvh`,
+                  height: `${uwu.size * 100}dvh`,
                   animationDelay: `${Math.random() * 1}s`,
                 }}
               >

diff --git a/src/components/Header.css b/src/components/Header.css
@@ -63,7 +63,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  height: calc(100vh - 7rem);
+  height: calc(100dvh - 7rem);
   background: rgba(28, 31, 34, 0.8);
   mix-blend-mode: multiply;
   z-index: 1;

diff --git a/src/components/Hero.css b/src/components/Hero.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
   background: linear-gradient(
     180deg,
     #f5dce8 0%,

diff --git a/src/components/Why.css b/src/components/Why.css
@@ -1,6 +1,6 @@
 .why-fixed {
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
   top: 0;
   left: 0;
   background: var(--main);
@@ -28,7 +28,7 @@
   width: 50%;
   top: 0;
   right: 0;
-  height: 100vh;
+  height: 100dvh;
   background: linear-gradient(
     0deg,
     var(--main) 0%,
@@ -43,7 +43,7 @@
 
 .why-fixed-image-container {
   width: 50%;
-  height: 100vh;
+  height: 100dvh;
   overflow: hidden;
 }