me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
unarist 2017-05-03 21:02:15 +09:00 committed by Eugen Rochko
parent 90c00f075a
commit e61ecf4091
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;
}
@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;