diff --git a/packages/app/src/App.vue b/packages/app/src/App.vue
index 474ac31..ab280c4 100644
--- a/packages/app/src/App.vue
+++ b/packages/app/src/App.vue
@@ -11,11 +11,19 @@ export default {
 </script>
 
 <style>
+body {
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+}
+html {
+  height: -webkit-fill-available;
+}
 a { 
   text-decoration: none;
 }
 
 .full-viewport-height {
-  height: 100vh;
+  min-height: 100vh;
+min-height: -webkit-fill-available;
 }
 </style>
diff --git a/packages/app/src/components/ClassicChallenge.vue b/packages/app/src/components/ClassicChallenge.vue
index c7f440f..4db7374 100644
--- a/packages/app/src/components/ClassicChallenge.vue
+++ b/packages/app/src/components/ClassicChallenge.vue
@@ -85,7 +85,8 @@ export default Vue.extend({
 @media (max-width: 599px) {
   .container {
     width: 100%;
-    height: 100vh;
+    min-height: 100vh;
+min-height: -webkit-fill-available;
     display: flex;
     flex-direction: column;
     background-color: #114489;
diff --git a/packages/app/src/pages/CustomizePracticePage.vue b/packages/app/src/pages/CustomizePracticePage.vue
index 8d46418..90b2fff 100644
--- a/packages/app/src/pages/CustomizePracticePage.vue
+++ b/packages/app/src/pages/CustomizePracticePage.vue
@@ -105,7 +105,8 @@ export default {
 @media (max-width: 599px) {
   .mobile-container {
     width: 100%;
-    height: 100vh;
+    min-height: 100vh;
+min-height: -webkit-fill-available;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
diff --git a/packages/app/src/pages/HomePage.vue b/packages/app/src/pages/HomePage.vue
index d206c73..783ef32 100644
--- a/packages/app/src/pages/HomePage.vue
+++ b/packages/app/src/pages/HomePage.vue
@@ -77,7 +77,8 @@ export default {
 @media (max-width: 599px) {
   .mobile-container {
     width: 100%;
-    height: 100vh;
+    min-height: 100vh;
+min-height: -webkit-fill-available;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
diff --git a/packages/app/src/pages/PracticePage.vue b/packages/app/src/pages/PracticePage.vue
index 0292f7f..4dc1d1b 100644
--- a/packages/app/src/pages/PracticePage.vue
+++ b/packages/app/src/pages/PracticePage.vue
@@ -72,7 +72,8 @@ export default {
 @media (max-width: 599px) {
   .mobile-container {
     width: 100%;
-    height: 100vh;
+    min-height: 100vh;
+min-height: -webkit-fill-available;
     display: flex;
     flex-direction: column;
     justify-content: space-between;