diff options
| -rw-r--r-- | mascara/src/app/first-time/create-password-screen.js | 2 | ||||
| -rw-r--r-- | mascara/src/app/first-time/index.css | 18 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/welcome-screen.scss | 12 |
3 files changed, 22 insertions, 10 deletions
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 37294b9b5..192da3399 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -60,7 +60,7 @@ class CreatePasswordScreen extends Component { return isLoading ? <LoadingScreen loadingMessage="Creating your new account" /> : ( - <div> + <div className={classnames({ 'first-view-main-wrapper': !isMascara })}> <div className={classnames({ 'first-view-main': !isMascara, 'first-view-main__mascara': isMascara, diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index 9cc9faeb3..b49dd9d45 100644 --- a/mascara/src/app/first-time/index.css +++ b/mascara/src/app/first-time/index.css @@ -21,6 +21,12 @@ text-align: center; } +.first-view-main-wrapper { + display: flex; + width: 100%; + padding-left: 10vw; +} + .first-view-main, .first-view-main__mascara { display: flex; @@ -32,15 +38,9 @@ justify-content: space-between; } -@media screen and (min-width: 576px) { - .first-view-main { - width: 85vw; - } -} - -@media screen and (min-width: 769px) { - .first-view-main { - width: 80vw; +@media screen and (max-width: 575px) { + .first-view-main-wrapper { + padding: 0; } } diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss index 86fc7d04d..bfd174ad9 100644 --- a/ui/app/css/itcss/components/welcome-screen.scss +++ b/ui/app/css/itcss/components/welcome-screen.scss @@ -10,6 +10,10 @@ padding: 70px 0; background: $white; + @media screen and (max-width: 575px) { + padding: 0; + } + &__info { display: flex; flex-flow: column; @@ -20,6 +24,10 @@ &__header { font-size: 1.65em; margin-bottom: 14px; + + @media screen and (max-width: 575px) { + font-size: 1.5em; + } } &__copy { @@ -27,6 +35,10 @@ width: 400px; max-width: 90vw; text-align: center; + + @media screen and (max-width: 575px) { + font-size: 0.9em; + } } } |