diff options
| -rw-r--r-- | app/javascript/styles/components.scss | 37 |
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; |