style: footer layout on mobile devices

Beraliv · Dec 30, 2024 · 9385125 · 9385125
1 parent e29c125
commit 9385125
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/App.module.css b/src/components/App.module.css
@@ -1,10 +1,11 @@
 .App {
   max-width: 42rem;
+  margin-top: auto;
   display: grid;
   grid-template-rows: auto 1fr auto;
   gap: 1rem;
-  min-height: 96vh;
-  padding: 2vh;
+  height: calc(100% - 1rem);
+  padding: 0.5rem 1rem;
 }
 
 .Conversion {

diff --git a/src/index.css b/src/index.css
@@ -39,6 +39,11 @@ a:hover {
   color: #535bf2;
 }
 
+html,
+body {
+  height: 100%;
+}
+
 body {
   margin: 0;
   display: flex;