Responsive teórico - Responsive real.

quad22 · #1 (**permalink**) 21/02/2018, 16:58

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.

DragonX · #2 (**permalink**) 22/02/2018, 06:24

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

quad22 · #3 (**permalink**) 22/02/2018, 16:12

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).

Tedel · #4 (**permalink**) 22/02/2018, 20:20

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.

quad22 · #5 (**permalink**) 22/02/2018, 20:45

El ancho está bien: las cajas no se van por los lados, se van por debajo del height.

DragonX · #6 (**permalink**) 23/02/2018, 06:12

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

quad22 · #7 (**permalink**) 23/02/2018, 14:48

Cita:

Iniciado por DragonX

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..

ArturoGallegos · #8 (**permalink**) 24/02/2018, 14:21

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.