Chore: fix website layout to render correctly on mobile (kedacore#796)

* Chore: fix website layout to render correctly on mobile Signed-off-by: thisisobate <obasiuche62@gmail.com> * chore: fix nav item alignment Signed-off-by: thisisobate <obasiuche62@gmail.com> * fix content overflow Signed-off-by: thisisobate <obasiuche62@gmail.com> * fix scroll behavior for vertical overflow Signed-off-by: thisisobate <obasiuche62@gmail.com> * make contents span entire width on mobile Signed-off-by: thisisobate <obasiuche62@gmail.com> * use appropriate css unit Signed-off-by: thisisobate <obasiuche62@gmail.com> * fix content alignment Signed-off-by: thisisobate <obasiuche62@gmail.com>
SpiritZhou · Jun 29, 2022 · e6bdca7 · e6bdca7
1 parent 37a62c8
commit e6bdca7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/assets/sass/nav.sass b/assets/sass/nav.sass
@@ -77,4 +77,6 @@
 .navbar-dropdown .navbar-item
 	color: #4a4a4a
 
-
+@media screen and (max-width: 1024px)
+  .is-fixed-top
+    overflow: hidden
diff --git a/assets/sass/style.sass b/assets/sass/style.sass
@@ -127,6 +127,9 @@ $hero-body-padding: 4rem 1.5rem
 @import "content"
 @import "nav"
 
+*, *::before, *::after 
+  max-width: 100vw
+
 .has-extra-top-margin
   margin-top: 1.5rem
 
@@ -163,6 +166,7 @@ $hero-body-padding: 4rem 1.5rem
 
   .is-main
     flex: 1
+    overflow: hidden
 
 =logo($desk, $tab, $touch)
   +desktop
@@ -256,6 +260,10 @@ hr
 
 .section 
 	padding: 4rem 1.5rem
+
+@media screen and (max-width: 1024px)
+  .section
+    width: 100vw
 
 .underline--magical
   background-image: linear-gradient(to right, rgb(250, 112, 154) 0%, rgb(254, 225, 64) 100%)