aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--mascara/src/app/first-time/create-password-screen.js2
-rw-r--r--mascara/src/app/first-time/index.css18
-rw-r--r--ui/app/css/itcss/components/welcome-screen.scss12
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;
+ }
}
}