about summary refs log tree commit diff
path: root/app/javascript
diff options
context:
space:
mode:
authorunarist <m.unarist@gmail.com>2017-05-03 21:02:15 +0900
committerEugen Rochko <eugen@zeonfederated.com>2017-05-03 14:02:15 +0200
commite61ecf4091774c3cf9bf890b522c957022fca70d (patch)
tree627e8687541b310703749420878cdd2feea5e08a /app/javascript
parent90c00f075a42e9133af035b206a511d438954a3f (diff)
Add styles for small devices to .onboarding-modal (#2748)
Diffstat (limited to 'app/javascript')
-rw-r--r--app/javascript/styles/components.scss37
1 files changed, 37 insertions, 0 deletions
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 523389931..3c91e730b 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -2827,6 +2827,19 @@ button.icon-button.active i.fa-retweet {
   margin-right: 10px;
 }
 
+@media screen and (max-width: 400px) {
+  .onboarding-modal__page-one {
+    flex-direction: column;
+  }
+
+  .onboarding-modal__page-one__elephant-friend {
+    width: 100%;
+    height: 30vh;
+    max-height: 160px;
+    margin-bottom: 5vh;
+  }
+}
+
 .onboarding-modal__page-two,
 .onboarding-modal__page-three,
 .onboarding-modal__page-four,
@@ -2889,6 +2902,30 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
+@media screen and (max-width: 320px) and (max-height: 600px) {
+  .onboarding-modal__page p {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .onboarding-modal__page-two .figure,
+  .onboarding-modal__page-three .figure,
+  .onboarding-modal__page-four .figure,
+  .onboarding-modal__page-five .figure {
+    font-size: 12px;
+    margin-bottom: 10px;
+  }
+
+  .onboarding-modal__page-four__columns .row {
+    margin-bottom: 10px;
+  }
+
+  .onboarding-modal__page-four__columns .column-header {
+    padding: 5px;
+    font-size: 12px;
+  }
+}
+
 .onboarding-modal__image {
   border-radius: 8px;
   width: 70vw;