mirror of
https://github.com/Starlio-app/Starlio-web.git
synced 2024-11-06 01:13:57 +03:00
added optimization for all screens
This commit is contained in:
parent
8a90465b0e
commit
b0dbd88b3f
1 changed files with 161 additions and 25 deletions
|
@ -10,41 +10,177 @@ body {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
#devices {
|
||||
width: 840px;
|
||||
height: 357px;
|
||||
margin: 260px 40px;
|
||||
}
|
||||
|
||||
#content p {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
#devices {
|
||||
display: block;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
@media (min-width: 0) {
|
||||
#devices {
|
||||
margin: 65% auto;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 2.5em;
|
||||
margin-top: -160%;
|
||||
}
|
||||
|
||||
#subtitle {
|
||||
margin-top: -5%;
|
||||
}
|
||||
|
||||
#description, #subtitle, #title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#google-play, #github {
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
#google-play {
|
||||
margin-top: 51%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
#devices {
|
||||
margin: 50% auto;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 3em;
|
||||
margin-top: -130%;
|
||||
}
|
||||
|
||||
#google-play, #github {
|
||||
width: 37%;
|
||||
height: 37%;
|
||||
}
|
||||
|
||||
#get-it-on {
|
||||
margin-top: 5%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#devices {
|
||||
margin: 39% auto;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 3.5em;
|
||||
margin-top: -110%;
|
||||
}
|
||||
|
||||
#description {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#google-play, #github {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
#get-it-on {
|
||||
margin-top: 1%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#devices {
|
||||
margin: 30% auto;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 4em;
|
||||
margin-top: -33%;
|
||||
margin-left: 65%;
|
||||
margin-top: -95%;
|
||||
}
|
||||
|
||||
#description {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#google-play, #github {
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
#get-it-on {
|
||||
margin-top: -2%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
#devices {
|
||||
margin: 25% auto;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 4.5em;
|
||||
margin-top: -85%;
|
||||
}
|
||||
|
||||
#description {
|
||||
width: 55%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#google-play, #github {
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
#get-it-on {
|
||||
margin-top: -3%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
#devices {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
margin: 15% 2%;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 4em;
|
||||
margin-top: -37%;
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
#subtitle {
|
||||
font-size: 2em;
|
||||
margin-left: 58%;
|
||||
margin-top: -1.3%;
|
||||
margin-top: -2%;
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
#description {
|
||||
font-size: 1.5em;
|
||||
margin-left: 58%;
|
||||
width: 600px;
|
||||
height: 114px;
|
||||
font-size: 1.1em;
|
||||
width: 30%;
|
||||
margin: 2% 60%;
|
||||
}
|
||||
|
||||
#google-play, #github {
|
||||
width: 315px;
|
||||
height: 114px;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
#get-it-on {
|
||||
margin-left: 57%;
|
||||
margin-top: 1%;
|
||||
margin-top: -25%;
|
||||
margin-left: 47%;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue