Mantener un div en el mismo lugar en diferentes pantallas
Publicado por edmundo (2 intervenciones) el 22/10/2020 22:47:18
Hola comunidad, tengo un problema y necesito ayuadaaaaaaaaaa.
veran estoy haciendo una practica, quiero hacer una maqueta totalmente responsive, pero solo con html, css y js, el detalle que me perturba en este momento es: yo usé el @media screen para dar las dimensiones a cada pantalla de manera individual de 1440px, 1020px, 768px y 425px, todos estos funcionan bien en todos los elementos, pero hay una dimensión que no incluí que es la que esta entre 1020px y 768px, yo la puse como 950px, y sin esta dimensión en mi pantalla solo un elemento se sale de donde tiene que estar ubicado, aqui les paso el css
y este es el html al que le estoy aplicando el css:
la parte que nos interesa es la de las dimensiones de la etiqueta nav
asi queda cuando esta en pantalla completa y con las dimensiones para 950px, pero cuando lo cambia 1440px
no se por que una dimensión altera la otra, ayuda
veran estoy haciendo una practica, quiero hacer una maqueta totalmente responsive, pero solo con html, css y js, el detalle que me perturba en este momento es: yo usé el @media screen para dar las dimensiones a cada pantalla de manera individual de 1440px, 1020px, 768px y 425px, todos estos funcionan bien en todos los elementos, pero hay una dimensión que no incluí que es la que esta entre 1020px y 768px, yo la puse como 950px, y sin esta dimensión en mi pantalla solo un elemento se sale de donde tiene que estar ubicado, aqui les paso el 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
129
130
131
132
133
134
.nav{
display: flex;width: 100%;
height: 9.7%;
justify-content: center;
align-items: center;
position: absolute;top: 80%;
border: blue 2px solid;}.nav div{
margin: 30px;}.nav div a{
text-decoration: none;
font-size: 28px;
color: black;}@media screen and (max-width:1440px){
.contenedor{
height: 300px;width: 100%;
}.logo{
font-size: 45px;
}.padre-menu-icon{
left: 0%;
width: calc(100%-5%);
}.padre-menu-icon div a img{
width: 2.5vw;
height: 2.5vw;
}.nav{
top: 7.2%;
height: 8%;
}.nav div{
margin: 50px; }}@media screen and (max-width:1024px){
.contenedor{
width: 100%
}.padre-menu-icon{
width: calc(100%-5%);
}.padre-menu-icon div a img{
width: 2.5vw;
height: 2.5vw;
}.nav{
top: 9%;
height: 6.1%;
}.nav div{
margin: 50px; }.nav div a{
font-size: 20px;
}}@media screen and (max-width:950px){
.nav{
top: 10.4%;
height: 9.7%;
}}@media screen and (max-width:768px){
.contenedor{
height: 300px;width: 100%;
}.logo{
top: 1%;
}.padre-menu-icon{
top: -5%;
}.padre-menu-icon div a img{
width: 2.5vw;
height: 2.5vw;
}.nav{
top: 9.8%;
height: 5.2%;
}.nav div{
margin: 27px; }.nav div a{
font-size: 18px;
}}@media screen and (max-width:425px){
.contenedor{
height: 250px;width: 100%;
}.logo{
top: 2%;
left: 40%;
font-size: 30px;
}.padre-menu-icon{
top: -5%;
}.padre-menu-icon div{
margin: 5px; }.padre-menu-icon div a img{
width: 2.5vw;
height: 2.5vw;
}.nav{
top: 8%;
height: 5%;
}.nav div{
margin: 10px; }.nav div a{
font-size: 12px;
}}y este es el html al que le estoy aplicando el css:
1
2
3
4
5
6
7
8
<div class="nav">
<div><a class="menu_link" href="Mujer.html">Mujer</a></div>
<div><a href="./Hombre.html">Hombre</a></div>
<div><a href="./Accesorios.html">Accesorios</a></div>
<div><a href="./Oferta.html">Oferta</a></div>
<div><a href="./Tienda.html">Tienda</a></div>
</div>
</div>
asi queda cuando esta en pantalla completa y con las dimensiones para 950px, pero cuando lo cambia 1440px no se por que una dimensión altera la otra, ayudaValora esta pregunta
0