static: css: main: Fix some weird cases on mobile devices

There was a weird footer not completed on mobile devices, this was happening because the footer was not taking the full width of the viewport, this was fixed by setting the width to 100vw. Also, the main element was not taking the full height of the viewport. Signed-off-by: Matheus Castello <[email protected]>
torizon · Oct 10, 2024 · 00b2c14 · 00b2c14
1 parent 30aeb01
commit 00b2c14
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -12,6 +12,11 @@ html {
 body {
     /* font-family: 'Open Sans', sans-serif; */
     font-family: 'Raleway', sans-serif;
+    overflow-x: hidden;
+}
+
+main {
+    min-height: calc(100vh);
 }
 
 header {
@@ -380,6 +385,7 @@ footer {
     bottom: 0;
     transition: box-shadow 0.5s ease-in-out;
     z-index: 9999999;
+    width: 100vw;
 }
 
 .footer-scrolled {