From 9951a2e8576ae6525ea6eca624cd003713129322 Mon Sep 17 00:00:00 2001 From: laurenziello Date: Sun, 25 Oct 2020 18:47:24 +0000 Subject: [PATCH 1/2] Fix full height on mobile screens --- packages/app/src/App.vue | 2 +- packages/app/src/components/ClassicChallenge.vue | 2 +- packages/app/src/pages/CustomizePracticePage.vue | 2 +- packages/app/src/pages/HomePage.vue | 2 +- packages/app/src/pages/PracticePage.vue | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/app/src/App.vue b/packages/app/src/App.vue index 474ac31..2c3bd17 100644 --- a/packages/app/src/App.vue +++ b/packages/app/src/App.vue @@ -16,6 +16,6 @@ a { } .full-viewport-height { - height: 100vh; + min-height: 100vh; } diff --git a/packages/app/src/components/ClassicChallenge.vue b/packages/app/src/components/ClassicChallenge.vue index c7f440f..186798b 100644 --- a/packages/app/src/components/ClassicChallenge.vue +++ b/packages/app/src/components/ClassicChallenge.vue @@ -85,7 +85,7 @@ export default Vue.extend({ @media (max-width: 599px) { .container { width: 100%; - height: 100vh; + min-height: 100vh; 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..04d09b4 100644 --- a/packages/app/src/pages/CustomizePracticePage.vue +++ b/packages/app/src/pages/CustomizePracticePage.vue @@ -105,7 +105,7 @@ export default { @media (max-width: 599px) { .mobile-container { width: 100%; - height: 100vh; + height: min-100vh; 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..8b6e0e3 100644 --- a/packages/app/src/pages/HomePage.vue +++ b/packages/app/src/pages/HomePage.vue @@ -77,7 +77,7 @@ export default { @media (max-width: 599px) { .mobile-container { width: 100%; - height: 100vh; + height: min-100vh; 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..8969dcb 100644 --- a/packages/app/src/pages/PracticePage.vue +++ b/packages/app/src/pages/PracticePage.vue @@ -72,7 +72,7 @@ export default { @media (max-width: 599px) { .mobile-container { width: 100%; - height: 100vh; + height: min-100vh; display: flex; flex-direction: column; justify-content: space-between; From bde1e5dc823c49365e54a8d7b83ec294ad2f09c4 Mon Sep 17 00:00:00 2001 From: laurenziello Date: Fri, 30 Oct 2020 22:16:05 +0000 Subject: [PATCH 2/2] Fix height --- packages/app/src/App.vue | 8 ++++++++ packages/app/src/components/ClassicChallenge.vue | 1 + packages/app/src/pages/CustomizePracticePage.vue | 3 ++- packages/app/src/pages/HomePage.vue | 3 ++- packages/app/src/pages/PracticePage.vue | 3 ++- 5 files changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/app/src/App.vue b/packages/app/src/App.vue index 2c3bd17..ab280c4 100644 --- a/packages/app/src/App.vue +++ b/packages/app/src/App.vue @@ -11,11 +11,19 @@ export default { diff --git a/packages/app/src/components/ClassicChallenge.vue b/packages/app/src/components/ClassicChallenge.vue index 186798b..4db7374 100644 --- a/packages/app/src/components/ClassicChallenge.vue +++ b/packages/app/src/components/ClassicChallenge.vue @@ -86,6 +86,7 @@ export default Vue.extend({ .container { width: 100%; 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 04d09b4..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: min-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 8b6e0e3..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: min-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 8969dcb..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: min-100vh; + min-height: 100vh; +min-height: -webkit-fill-available; display: flex; flex-direction: column; justify-content: space-between;