-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathresponsive.css
128 lines (113 loc) · 2.05 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
121
122
123
124
125
126
127
128
/* Escritorios grandes */
/* @media (min-width:1200px){
} */
/* Tablets en horizontal y escritorios normales */
/* @media (min-width:768px){
main{
display: flex;
flex-direction: column;
}
.container-left{
width: 80%;
}
.container-right{
width: 80%;
}
} */
/* Moviles en horizontal o tablet en vertical */
@media screen and (max-width:768px){
body{
justify-content: center;
}
main{
display: flex;
flex-direction: column;
}
.logo {
width: 100%;
height:10%;
padding: 2px;
top: 40px;
left: 40px;
gap: 40px;
}
.container-left{
width: 90%;
margin:auto;
margin-bottom: 10%;
}
button{
width: 40%;
font-size:2.5vw;
}
.container-right{
width: 80%;
}
.bloque-salida-inicial{
height: 30%;
}
.img-container-right{
display:none;
}
.out-text{
height: 15vh;
}
.text1 {
margin: 20px 0 0 0;
font-weight: 700;
font-size: 20px;
}
.text2 {
margin:30px 0 30px 0;
font-size: 12px;
color: rgb(118, 122, 122)
}
.copyright{
font-size:1.5vw;
}
}
/* Moviles en vertical */
@media (max-width:375px){
body{
justify-content: center;
}
main{
display: flex;
flex-direction: column;
}
.logo {
width: 85vw;
height:8vh;
padding: 2px;
top: 40px;
left: 40px;
gap: 40px;
}
.container-left{
width: 90vw;
margin: auto;
}
.container-buttons{
flex-direction: column;
align-items: center;
}
button{
width: 90%;
padding: 18px;
font-size:4vw;
border-radius: 20px;
}
button:hover {
transform: scale(1);
}
.container-right{
width: 85vw;
margin: auto;
}
.button-copy{
width: 90%;
}
.copyright{
font-size:2vw;
}
}