From e6bdca78ee5407a3fe6071ca2ef5858e1293f6f7 Mon Sep 17 00:00:00 2001 From: Uchechukwu Obasi Date: Wed, 29 Jun 2022 07:28:23 +0100 Subject: [PATCH] Chore: fix website layout to render correctly on mobile (#796) * Chore: fix website layout to render correctly on mobile Signed-off-by: thisisobate * chore: fix nav item alignment Signed-off-by: thisisobate * fix content overflow Signed-off-by: thisisobate * fix scroll behavior for vertical overflow Signed-off-by: thisisobate * make contents span entire width on mobile Signed-off-by: thisisobate * use appropriate css unit Signed-off-by: thisisobate * fix content alignment Signed-off-by: thisisobate --- assets/sass/nav.sass | 4 +++- assets/sass/style.sass | 8 ++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/assets/sass/nav.sass b/assets/sass/nav.sass index 5147990899d..cc39c128b5c 100644 --- 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 index e0349cfb859..a472f59e20f 100644 --- 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%)