-
Notifications
You must be signed in to change notification settings - Fork 0
/
responsive.css
121 lines (92 loc) · 2.25 KB
/
responsive.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
.flex-row > div {
flex-basis:25%;
}
/*****************************************************************************/
/* Some tablets and larger (768px) */
/*****************************************************************************/
@media only screen and (max-width: 768px) {
.person {
width:min(11em,30vw);
}
.flex-row > div {
flex-basis:unset;
}
}
/*****************************************************************************/
/* Some landscape phones and larger (576px) */
/*****************************************************************************/
@media only screen and (max-width: 540px) {
.person {
width: min(11em,34vw);
}
/* .person h3 {
height: 1em;
} */
h4 {
font-size: 0.9rem;
}
.flex-row > div {
flex-basis:33%;
}
}
/*****************************************************************************/
/* Some smaller phones (576px) */
/*****************************************************************************/
@media only screen and (max-width: 414px) {
.flex-row > div {
flex-basis:80%;
}
.person {
padding: 1em 1em 0em;
}
#clock .text {
font-size: 1.3rem;
}
#clock .time {
font-size: 2.5rem;
}
button {
width: 13em;
}
#wealthsimple {
max-width: 20em;
}
}
/*****************************************************************************/
/* Some smaller phones (375px) */
/*****************************************************************************/
@media only screen and (max-width: 375px) {
.person {
padding: 1em;
}
#clock .time {
font-size: 2.3rem;
}
#wealthsimple {
max-width: 18em;
}
}
@media only screen and (max-width: 321px) {
button {
width: 10em;
}
#wealthsimple {
max-width: 16em;
}
}
/*****************************************************************************/
/* Some desktops and larger (992px) */
/*****************************************************************************/
@media only screen and (max-width: 280px) {
#wealthsimple {
max-width: 13em;
}
#clock .time {
font-size: 1.8rem;
}
}
/*****************************************************************************/
/* Desktops and larger (1200px) */
/*****************************************************************************/
@media only screen and (min-width: 1200px) {
}