fixed mobile view!

inovex · Oct 5, 2023 · 536a4fb · 536a4fb
1 parent b659f91
commit 536a4fb
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 5 deletions.
diff --git a/public/assets/mobile/mobile_dark--mobile.webp b/public/assets/mobile/mobile_dark--mobile.webp
diff --git a/public/assets/mobile/mobile_light--mobile.webp b/public/assets/mobile/mobile_light--mobile.webp
diff --git a/src/components/Mobile.scss b/src/components/Mobile.scss
@@ -61,13 +61,23 @@
 }
 
 @media screen and (max-width: 700px) {
+  h2 {
+    font-size: 24px;
+    line-height: 28px;
+  }
+
+  p {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
   .mobile__section {
     box-sizing: border-box;
     flex-direction: column-reverse;
     justify-content: center;
     align-items: center;
     text-align: center;
-    height: 100vh;
+    height: fit-content;
     padding: 64px 0 0 0;
     gap: 16px;
   }
@@ -81,19 +91,28 @@
     justify-content: center;
 
     .mobile__stan {
-      height: 500px;
+      min-height: unset;
+      height: 380px;
+      content: url("/assets/mobile/mobile_light--mobile.webp");
     }
 
     .mobile__background {
-      height: 700px;
-      right: 96px;
+      min-height: unset;
+      height: 540px;
+      right: 46px;
     }
   }
 
   .mobile__text {
     margin: 0;
     width: 90%;
   }
+
+  @media (prefers-color-scheme: dark) {
+    .mobile__image .mobile__stan {
+      content: url("/assets/mobile/mobile_dark--mobile.webp");
+    }
+  }
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -89,6 +89,10 @@ const { title } = Astro.props;
     min-height: 100vh;
   }
 
+  section {
+    overflow-x: clip;
+  }
+
   .body_wrapper {
     display: flex;
     flex-direction: column;

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -14,7 +14,7 @@ import { AboutUs } from "../views/AboutUs/AboutUs";
   <Choices client:visible />
   <Uniqueness />
   <Mobile />
-  <TargetUser />
   <Features />
+  <TargetUser />
   <AboutUs />
 </Layout>
diff --git a/src/views/Features/Features.scss b/src/views/Features/Features.scss
@@ -5,6 +5,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  margin-bottom: 64px;
 
   h2,
   p {