diff --git a/scss/organisms/_banners.scss b/scss/organisms/_banners.scss index 7a86b341e1b7..141987901082 100644 --- a/scss/organisms/_banners.scss +++ b/scss/organisms/_banners.scss @@ -76,6 +76,9 @@ .jp-connect-full__container-card { padding: rem( 64px ) rem( 64px ) rem( 96px ); + @include breakpoint(large-phone) { + padding: rem(32px) rem(32px); + }; background: white; margin: 1em; @@ -114,7 +117,11 @@ }; @include breakpoint(tablet) { - top: 46px; + top: 32px; + }; + + @include breakpoint(large-phone) { + top: 0px; }; // hide the notice by default. Only display it when it is injected in the middle of the page. @@ -125,6 +132,11 @@ &.toplevel_page_jetpack .jp-jetpack-connect__container { .jp-connect-full__container { display: block; + .jp-connect-full__step-header h2 { + @include breakpoint(large-phone) { + margin: 0; + }; + } } } } @@ -143,6 +155,10 @@ .jp-connect-full__step-header { max-width: 700px; margin: 0 auto 40px auto; + @include breakpoint(large-phone) { + margin-bottom: rem( 24px ); + }; + line-height: 1.5; h2 { @@ -152,7 +168,7 @@ color: black; @include breakpoint(large-phone) { - margin: rem( 24px ) 0 0; + margin-top: rem( 16px ); }; } @@ -261,9 +277,6 @@ margin: 2em 0; max-width: 100%; } - .jetpack-disconnected .jp-connect-full__container .jp-connect-full__container-card { - padding: rem(48px) rem(32px); - } }