PLT-4546 Welcome/tutorial screens have messed up layout at a width of 320px (iPhone 5 size) or less (#4476)

1 files changed, 23 insertions, 3 deletions

diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index d18295dc4..b66189c8b 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -83,9 +83,10 @@
     .tutorial-steps__container {
         .tutorial__content {
             .tutorial__steps {
-                margin-bottom: 0;
-                min-height: auto;
-                padding-bottom: 8em;
+                margin-top: 15%;
+                margin-bottom: 15%;
+                max-height: 70%;
+                padding-bottom: 0;
             }
         }
     }
@@ -1389,6 +1390,25 @@
             .tutorial__steps {
                 padding: 0 20px;
                 width: 100%;
+                h1 {
+                    font-size: 35px;
+                    margin: -5px 0 20px;
+                }
+                h3 {
+                    margin-bottom: 10px;
+                }
+                .tutorial__app-icons {
+                    margin: 10px 0;
+                }
+                .tutorial__circles {
+                    margin: 0 0 15px;
+                    bottom: 60px;
+                    position: absolute;
+                }
+                .tutorial__footer {
+                    bottom: 30px;
+                    position: absolute;
+                }
             }
         }
     }