fix onboarding layout errors

src/sass/views/onboarding/onboard-backup-request.scss

@@ -10,13 +10,6 @@
     margin: 20px auto 5px;
     height: 10vh;
   }
-  @media (min-width: 570px){
-    #backup-description {
-      max-width: 500px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
   #arrow-down {
     font-size: 4.2rem;
     color: $soft-blue;
@@ -24,8 +17,27 @@
   #backup-tldr {
     font-size: 16px;
   }
+  #backup-description {
+    max-width: 500px;
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
   .cta-buttons {
     @extend %cta-buttons;
     padding-bottom: 4vw;
   }
+  @media (max-height: 480px) {
+    #warning {
+      display: block;
+    }
+    #backup-description {
+      font-size: 14px;
+    }
+    #backup-tldr {
+      font-size: 14px;
+    }
+    #arrow-down {
+      display: none;
+    }
+  }
 }

src/sass/views/onboarding/onboard-disclaimer.scss

@@ -1,4 +1,14 @@
 #onboarding-disclaimer {
+  .checkbox input, .checkbox-icon {
+    position: relative;
+    width: 50px;
+    height: 50px;
+    display: block;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    -webkit-appearance: none;
+  }
   color: #fff;
   height: 100%;
   transition: transform 2.5s ease;
@@ -7,12 +17,13 @@
   }
   &-container {
     max-width: 450px;
-    display: flex;
-    flex-direction: column;
     justify-content: center;
     margin-left: auto;
     margin-right: auto;
-    height: calc(100vh - 160px);
+    padding-top: 3rem;
+    @media(max-height: 480px) {
+      padding-top: 1.5rem;
+    }
   }
   .has-header > &-container {
     height: calc(100vh - 210px);
@@ -22,6 +33,9 @@
   }
   #disclaimer-description {
     margin: 1rem 1rem 2rem;
+    @media(max-height: 480px) {
+      font-size: 14px;
+    }
   }
   ion-content {
     height: 101%;
@@ -45,6 +59,9 @@
       &:first-child{
         padding-top: 0;
       }
+      @media(max-height: 480px) {
+        font-size: 14px;
+      }
     }
   }
   .item {
@@ -162,14 +179,17 @@
   .checkbox input:checked + .checkbox-icon:before {
     border-color: rgb(19, 229, 182);
   }
-  button{
-    margin-top:1.5rem;
+  button {
+    margin-top: 1.5rem;
     position: relative;
   }
+  @media (max-height:480px) {
+    padding: 0.5rem;
+  }
 }
-@media (max-height:460px){
-    #agree-to-terms{
-      position: relative;
-      float:left;
-    }
+@media (max-height:460px) {
+  #agree-to-terms{
+    position: relative;
+    float:left;
+  }
 }

src/sass/views/onboarding/onboard-tour.scss

@@ -9,9 +9,6 @@
     padding-bottom: 12vh;
   }
   #onboarding-illustration-currency-exchange-rate {
-    background-color: $soft-blue;
-    border-radius: $button-border-radius;
-    box-shadow: $subtle-box-shadow;
     font-size: 14px;
     font-weight: normal;
     height: 40px;

src/sass/views/onboarding/onboarding.scss

@@ -34,6 +34,9 @@
     @media(max-width: 350px) {
       line-height: 1.3;
     }
+    @media(max-height: 480px) {
+      font-size: 16px;
+    }
   }
   .onboarding-tldr {
     font-size: 18px;
@@ -43,6 +46,9 @@
     @media(max-width: 350px) {
       font-size: 16px;
     }
+    @media(max-height: 480px) {
+      font-size: 14px;
+    }
   }
 }
 
@@ -67,16 +73,32 @@
 @import "onboard-push-notifications";
 
 %onboarding-illustration {
-  position: absolute;
   width: 100%;
-  height: 45%;
-  margin-top: 25vh;
-  top: 0;
+  margin-top: 1rem;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   z-index: -1;
 }
+
+@media(max-height: 600px) {
+  %onboarding-illustration {
+    height: 35%;
+  }
+}
+
+@media(max-height: 480px) {
+  %onboarding-illustration {
+    height: 23%;
+  }
+}
+
+@media(min-height: 600px) {
+  %onboarding-illustration {
+    height: 40%;
+  }
+}
+
 .onboarding-illustration {
   &-secure {
       @extend %onboarding-illustration;