Skip to content

Commit

Permalink
Chore: fix website layout to render correctly on mobile (kedacore#796)
Browse files Browse the repository at this point in the history
* Chore: fix website layout to render correctly on mobile

Signed-off-by: thisisobate <[email protected]>

* chore: fix nav item alignment

Signed-off-by: thisisobate <[email protected]>

* fix content  overflow

Signed-off-by: thisisobate <[email protected]>

* fix scroll behavior for vertical overflow

Signed-off-by: thisisobate <[email protected]>

* make contents span entire width on mobile

Signed-off-by: thisisobate <[email protected]>

* use appropriate css unit

Signed-off-by: thisisobate <[email protected]>

* fix content alignment

Signed-off-by: thisisobate <[email protected]>
  • Loading branch information
thisisobate authored Jun 29, 2022
1 parent 37a62c8 commit e6bdca7
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 1 deletion.
4 changes: 3 additions & 1 deletion assets/sass/nav.sass
Original file line number Diff line number Diff line change
Expand Up @@ -77,4 +77,6 @@
.navbar-dropdown .navbar-item
color: #4a4a4a


@media screen and (max-width: 1024px)
.is-fixed-top
overflow: hidden
8 changes: 8 additions & 0 deletions assets/sass/style.sass
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -163,6 +166,7 @@ $hero-body-padding: 4rem 1.5rem

.is-main
flex: 1
overflow: hidden

=logo($desk, $tab, $touch)
+desktop
Expand Down Expand Up @@ -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%)
Expand Down

0 comments on commit e6bdca7

Please sign in to comment.