From e61ecf4091774c3cf9bf890b522c957022fca70d Mon Sep 17 00:00:00 2001
From: unarist <m.unarist@gmail.com>
Date: Wed, 3 May 2017 21:02:15 +0900
Subject: [PATCH] Add styles for small devices to .onboarding-modal (#2748)
---
app/javascript/styles/components.scss | 37 +++++++++++++++++++++++++++
1 file changed, 37 insertions(+)
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 5233899313..3c91e730b1 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;
--
GitLab