treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

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

lolsob-rspec
unarist 2017-05-03 21:02:15 +09:00 committed by Eugen Rochko
parent 022353e522
commit 2ca810583b
1 changed files with 37 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/javascript/styles/components.scss
View File

@ -2827,6 +2827,19 @@ button.icon-button.active i.fa-retweet {
margin-right: 10px; 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-two,
.onboarding-modal__page-three, .onboarding-modal__page-three,
.onboarding-modal__page-four, .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 { .onboarding-modal__image {
border-radius: 8px; border-radius: 8px;
width: 70vw; width: 70vw;