Foros del Web » Creando para Internet » CSS »

Responsive teórico - Responsive real.

Estas en el tema de Responsive teórico - Responsive real. en el foro de CSS en Foros del Web. He diseñado una página en responsive de 1600x1200. La vuelco en un laptop de dicha resolución y los contenedores se salen del marco (*). Reduzco ...
  #1 (permalink)  
Antiguo 21/02/2018, 16:58
 
Fecha de Ingreso: noviembre-2009
Mensajes: 278
Antigüedad: 14 años, 6 meses
Puntos: 2
Responsive teórico - Responsive real.

He diseñado una página en responsive de 1600x1200. La vuelco en un laptop de dicha resolución y los contenedores se salen del marco (*). Reduzco la visualización de la pantalla al 80% y se ve perfecta (1280x960).

Si el resto de diseños responsive me hacen lo mismo (1920x1080, 1080x1920, 1024x768, 768x1024...) tiene que haber un método o código que resuelva este problema (rebajando automáticamente al 80% las pantallas donde falle. No sé si puede ser en lenguaje css porque el html ya tiene <meta name="viewport" content="width=device-width, initial-scale=1.0">).


¿Cual es la solución?

(*) En 640x360 me pasa algo parecido, por lo que me pasará en el resto de resoluciones.

Última edición por quad22; 21/02/2018 a las 17:04
  #2 (permalink)  
Antiguo 22/02/2018, 06:24
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 22 años
Puntos: 177
Respuesta: Responsive teórico - Responsive real.

No es un problema de reducir al 80% o al 90%. El problema debe estar en tu estructura seguramente. Yo trabajo con sitios responsive desde hace un largo tiempo y nunca me paso lo que estas planteando.

Podrás compartirnos tu sitio para poder verlo?

Slds
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #3 (permalink)  
Antiguo 22/02/2018, 16:12
 
Fecha de Ingreso: noviembre-2009
Mensajes: 278
Antigüedad: 14 años, 6 meses
Puntos: 2
Respuesta: Responsive teórico - Responsive real.

http://www.siaeuropa.eu/prueba/cu01.html.

Las pruebas con Windows Resizer en localhost y en http://troy.labs.daum.net/ son buenas, pero vista la página ya subida directamente desde el site se van las cajas de la pantalla.

He probado colocar en la hoja de estilos:

html, body { margin: 0px; height:100vh; }

html, body {height: 100vh; width: 100%; }

Pero no da resultado.

Debe hacer un código css para devolver los divs dentro de la pantalla (si el validador de css dice que los divs están bien encajados, debe existir ese código).

Última edición por quad22; 22/02/2018 a las 19:49
  #4 (permalink)  
Antiguo 22/02/2018, 20:20
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.744
Antigüedad: 13 años, 5 meses
Puntos: 444
Respuesta: Responsive teórico - Responsive real.

La solución, me parece, es darle un ancho máximo a <body>. No lo puedo probar acá porque no tengo una pantalla con esa resolución, pero debería funcionar.
__________________
Soy el autor de Heptagrama y tengo un servicio "todo incluido" de marketing web.
  #5 (permalink)  
Antiguo 22/02/2018, 20:45
 
Fecha de Ingreso: noviembre-2009
Mensajes: 278
Antigüedad: 14 años, 6 meses
Puntos: 2
Respuesta: Responsive teórico - Responsive real.

El ancho está bien: las cajas no se van por los lados, se van por debajo del height.
  #6 (permalink)  
Antiguo 23/02/2018, 06:12
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 22 años
Puntos: 177
Respuesta: Responsive teórico - Responsive real.

creo que el problema es tu CSS mas que nada y como estas seteando las propiedades flex a tu cotenedor y tus flex-items.
Yo que vos leo en detalle este documento A guide to flexbox y lo volveria a intenter
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #7 (permalink)  
Antiguo 23/02/2018, 14:48
 
Fecha de Ingreso: noviembre-2009
Mensajes: 278
Antigüedad: 14 años, 6 meses
Puntos: 2
Respuesta: Responsive teórico - Responsive real.

Cita:
Iniciado por DragonX Ver Mensaje
creo que el problema es tu CSS mas que nada y como estas seteando las propiedades flex a tu contenedor y tus flex-items.
Yo que vos leo en detalle este documento A guide to flexbox y lo volveria a intenter

Una pista: creo que es la posición del <tittle>. Las cajas se mueven hacia abajo desplazadas por el espacio que ocupa el <tittle>, pero lo he movido de contenedor y las cajas flexibles del contenedor siguen sin poderse centrar totalmente en dicho contenedor.


Luego, ocurre que en los laptop donde he probado la página 1600x900 y 1024 x768 debo reducir la visualización de la pantalla entre un 75 y un 90% (en ambos) para ver perfectamente las páginas.

Creo que no es un problema de flexbox: si los chequeos offline y online son correctos, es un problema de código css con el heigth en alguna parte..

Última edición por quad22; 23/02/2018 a las 18:05
  #8 (permalink)  
Antiguo 24/02/2018, 14:21
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 3 meses
Puntos: 1146
Respuesta: Responsive teórico - Responsive real.

Desde los 90's que no veía un sitio como este, que diseño, pero bueno ese no es el tema

Tu problema esta en que te falta leer y estudiar CSS, al posisionar un elemento en absolute, lo sacas de su flujo y es normal que el elemento que le sigue lo ignore y tome posicion bajo o sobre este.

De alli que tengas problemas con este., saca eso a la tiznada y en su lugar usa flex-wrap para que el titulo lo puedas poner al 100%.

luego usas min y max height en 100vh ambos, osea que #$%& con eso. sacalo a la #$%&

todo eso en .container_ppal ya con eso te toca jugar con tus estilos.

.... pero yo en tu lugar eliminaría todo y volvía a empezar.

Etiquetas: responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:45.