HTML - Problema con Responsive Design

 
Vista:
Imágen de perfil de diego gabriel
Val: 232
Bronce
Ha aumentado 1 puesto en HTML (en relación al último mes)
Gráfica de HTML

Problema con Responsive Design

Publicado por diego gabriel (98 intervenciones) el 09/09/2020 05:45:40
Captura-de-pantalla-108
Captura-de-pantalla-109
Captura-de-pantalla-111

Hola a todos! Les comento que estoy aprendiendo Responsive Design y realmente me gusta mucho, pero me surgió un problema mientras estuve haciendo mi pagina.
El menu es fixed. Cuando achico la pantalla (como se muestra en la imagen 2) CONTACTO baja, no se porque, si no no especifiqué en el media query nada (SOLO ESTO: <link rel="stylesheet" type="text/css" href="moviles/moviles.css" media="screen and (min-width:0px) and (max-width:480px)"/>
). Yo quisiera que CONTACTO no se baje sino que siga al lado de los demas pero los li se achiquen. veo que esto se da por default, pero no se porque se me baja el CONTACTO. Gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 1.221
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Problema con Responsive Design

Publicado por joel (338 intervenciones) el 09/09/2020 12:03:43
Veo muy poco código, pero los <li> del <nav> esta flotando, por eso cuando no cabe, se cae a la linea de abajo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez
Val: 861
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Problema con Responsive Design

Publicado por Lopez (266 intervenciones) el 09/09/2020 16:47:12
Con esta regla:

1
SOLO ESTO: <link rel="stylesheet" type="text/css" href="moviles/moviles.css" media="screen and (min-width:0px) and (max-width:480px)"/>

Estás dictando una regla de 0px hasta 480px. Imagino contacto se "baja" porque no cabe en la pantalla ,
debiendo hacerse espacio, en este caso hacia abajo.

En resumen tienes un nav con un 75% de ancho, y cada item dentro de él es de 17% (17% x 5 = 85%).
Como ves es difícil que caiga. La solución es incrementar el ancho del nav o usar otra medida como rem, ch o em.

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de diego gabriel
Val: 232
Bronce
Ha aumentado 1 puesto en HTML (en relación al último mes)
Gráfica de HTML

Problema con Responsive Design

Publicado por diego gabriel (98 intervenciones) el 13/09/2020 04:24:11
Captura-de-pantalla-114
Captura-de-pantalla-115
Hola Lopez; ahora quiero que los LI abarque todo el UL contenedor, y no que quede ese pequeño espacio que esta redondeado en bordó al lado de CONTACTO, pero quiero que mantenga sus margenes. Intente como me dijiste pero no pude, intente colocandole un BOX-SIZING :BORDER-BOX, y tampoco. Intenté modificando los valores para ajustarlo, pero si me paso con los valores, CONTACTO se baja, si no me paso, queda ese margen en CONTACTO. Como puedo hacerlo? Gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-2
Comentar
Imágen de perfil de Lopez
Val: 861
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Problema con Responsive Design

Publicado por Lopez (266 intervenciones) el 13/09/2020 15:48:27
Diego,

Quizás algo así te ponga en camino:

1
2
3
4
5
6
7
nav  ul {
 width:95%;
 margin-left: auto !important;
}
nav ul li {
 display: inline !important;
}

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-1
Comentar