Browse Source

Add styles for small devices to .onboarding-modal (#2748)

closed-social-glitch-2
unarist 7 years ago
committed by Eugen Rochko
parent
commit
e61ecf4091
1 changed files with 37 additions and 0 deletions
  1. +37
    -0
      app/javascript/styles/components.scss

+ 37
- 0
app/javascript/styles/components.scss View File

@ -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;

Loading…
Cancel
Save