Merge pull request #11 from DadonStyle/dev

fix mobile height and center issues
DadonStyle · Jan 30, 2024 · fedfa28 · fedfa28
2 parents ac12e1e + 3791ef3
commit fedfa28
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",

diff --git a/src/components/Background/Background.scss b/src/components/Background/Background.scss
@@ -1,7 +1,7 @@
 .background-wrapper {
   width: 100svw;
   height: 1px; // trick to let children inherit height
-  min-height: 100svh;
+  min-height: 100lvh;
   overflow-x: hidden;
   position: relative;
   background-color: inherit;

diff --git a/src/index.css b/src/index.css
@@ -28,7 +28,7 @@ body {
   display: flex;
   place-items: center;
   min-width: 320px;
-  min-height: 100vh;
+  min-height: 100dvh;
   background-color: #d9ecfd;
   font-family: "Poppins", sans-serif;
 }

diff --git a/src/modules/QuestionsContainer/QuestionsContainer.scss b/src/modules/QuestionsContainer/QuestionsContainer.scss
@@ -1,17 +1,20 @@
 .question-section {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   flex-direction: column;
   align-items: center;
   max-width: 900px;
   width: 100%;
   height: 100%;
   padding: 1.5rem 0;
+  position: relative;
   @media (max-width: 860px) {
     width: 100%;
   }
   .question-top-section {
     display: flex;
+    position: absolute;
+    top: 0.5rem;
     flex-direction: row;
     justify-content: space-between;
     gap: 1rem;