Hola Germán, hay algo raruno, pero no consigo identificar qué es.
a) Cuando pones el navegador a 480 o - te sale el scroll horizontal, que no debería salir nunca en un diseño responsive. ¿Hay algo que no encuentro que tenga min-width:480...? + cosinas b) Ya que cambias el ancho de cada columna1 en resoluciones menores, puedes cambiar tb el alto. Quedará más chulo. c) El botonako de más información pesa mucho (es muy llamativo) y como queda desparejo da cierta sensación de desorden. Se podrían alinear abajo haciendo un pequeño jaleo, pero quizás te quede más chulo si: 1) La propia imagen es un enlace + el titulo es un enlace 2) y ya al final del texto solo añades este enlace (seguido) + información. De esa manera no incordiará que quede desparejo, ya que el texto mancha mucho menos que el botón con fondo de colirinchis. No sé si me explico. 3) SI conviertes las imágenes en enlaces, les podrías añadir algún efcto chulo x CSS, que no cuesta mucho, como bajarles un poco la opacidad, que da sensación de brillo. Y ya mejor aún si lo haces con alguna transición ( http://www.mmfilesi.com/blog/efectos-especiales-con-css3-la-propiedad-transition/ ) 4) Un poco de margen al texto por los lados no le vendría mal (y mejor alineado x bandera a la izda). 5) Hay dos formas de tratar las imágenes en responsive cuando se alargan (digo, así con CSS, sin meter PHP ni cosas complejas de por medio). Una es como la tienen, pero verás que se te distorsionan un poco cuando se ponen al cien por cien en resoluciones canis. A mí eso no me molesta, pero igual puedes hacer otra historia y es meterlas dentro de un div, que es donde pones el overflow:hidden, y así lo que pasa es que se muestra un fragmento, pero sin distorsionarse. En cualquier caso, te está quedando una página CHULÍSIMA. *Abrazos++* El 25 de octubre de 2012 00:14, german vaquer <germ...@telefonica.net>escribió: > Ok ya me funciona y me redimensionan las columnas sin descolocarse, gracias > > Saludos: Germán Vaquer > > -----Mensaje original----- > From: marcos méndez filesi > Sent: Wednesday, October 24, 2012 4:40 PM > To: Ovillo, la lista de CSS en castellano > Subject: Re: [Ovillo] duda responsive design > > muchas gracias a ti por compartir el proceso. > > Entonces, sí, la jugada podría ser esta. > > a) Limitar el ancho. Que nunca sea más de 1200, para que los que tengan > resoluciones mayores no vean una página ilegible. > > Para eso, en el body podemos añadir esto: > > max-width: 1220px; > > b) Luego vamos con las media querys. Entonces, podrías hacer esto: > > En normal se ven las tres columnas, cada una con el 31% del ancho > disponible > > Un poco más chico, hasta 600, solo dos, cada una con aproximadamente el 49% > del ancho disponible > > Ya con menos de 400, se desflotan las columnas1 y se ponen al 100. > > Algo así: > > Normal: > > .columna1 { > float:left; > width:31%; > margin: 0.5%; > overflow:hidden; > height:33em; > box-sizing:border-box; > -webkit-box-sizing:border-box; > -moz-box-sizing:border-box; > } > > /* Responsive */ > > @media screen and (max-width:620px){ > .columna1 { > width:45%; > float:left; > } > } > @media screen and (max-width:400px){ > .columna1{ > float:none; > width:100%; > margin:0 auto; > } > } > > > > > > > El 24 de octubre de 2012 16:11, german vaquer > <germ...@telefonica.net>escribió: > > > Hola! > > Marcos, he aplicado lo que me dijistes en los 2 correos, tanto en la > clase > > columna1 y la clase imagen columna 1, y ahora ya se ve bien a > resoluciones > > mayores de 1200px, pero si reduzco la pantalla a 800X600, se me vuelven a > > descolocar la disposición de las imágenes y su contenido. > > http://www.pruebasgerman.com/companyo/entorn.html > > > > Que tengo que hacer mediaqueries específicos para cada resolución para > que > > me quede todo ok?. > > > > Saludos i gracias a todos por vuestra ayuda. > > > > Germán Vaquer > > > > -----Mensaje original----- > > From: marcos méndez filesi > > Sent: Wednesday, October 24, 2012 12:37 AM > > To: Ovillo, la lista de CSS en castellano > > Subject: Re: [Ovillo] duda responsive design > > > > + cosas. > > > > *1)* Para prevenir que la imagen te escojone las cápsula (Empedrats...), > > como te ocurre con la segunda de la segunda fila, conviene que > > especifiques > > una altura máxima a las imágenes. Para eso puedes añadir una clase a las > > imágenes > > > > .img_columna1 { > > width:100% !important; > > max-height: 10em; > > overflow:hidden; > > margin:1em; > > box-sizing:border-box; > > -webkit-box-sizing:border-box; > > -moz-box-sizing:border-box; > > } > > > > *2)* En vez de > > > > <meta name="viewport" content="width=device-width"> > > > > mejor así > > > > <meta name="viewport" content="width=device-width, initial-scale=1, > > user-scalable=yes"> > > > > *3)* Como estás con cajitas flotantes, te conviene que todas las columnas > > estén dentro de un div que las contenga y en ese es importante que añadas > > overflow:hidden, para que la tostadora del explorer haga las cosas bien. > > > > 4) No veo que el diseño sea responsive. No sé si es que aún no has > > empezado. Te dejo un enlace a una guía que espero te sirva de ayuda. > > > > http://www.mmfilesi.com/blog/tutorial-responsive-web-design-i > > > > SUERTE. > > > > El 23 de octubre de 2012 23:56, german vaquer > > <germ...@telefonica.net>escribió: > > > > > Hola buenas! > > > > > > Estoy reconvirtiendo una web ya realizada en una web con diseño > > responsivo > > > para visualizar en cualquier dispositivo. El problema que tengo es en > la > > > siguiente página de dicha web: > > > > > > http://www.pruebasgerman.com/companyo/entorn.html > > > > > > Aquí tengo 9 imágenes con su respectivo texto, y quiero que todas me > > > queden en la misma posición que las 3 primeras y las 3 de la parte > > > central, > > > el resto de imágenes se me salen de madre y se me descolocan y no sé el > > > porqué, puesto que el código css es el mismo para todas las imágenes. > > > Alguna sugerencia?, he repasado el código por si hubiese algo que me > > > faltase, pero la verdad es que no he visto nada raro. y eso que le he > > dado > > > bastantes vueltas. > > > > > > Gracias de antemano: saludos > > > > > > Germán Vaquer > > > _______________________________________________ > > > Lista de distribución Ovillo > > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > > > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > > http://lists.ovillo.org/mailman/listinfo/ovillo > > > > > > > > > > > -- > > Marcos Méndez Filesi > > http://www.mmfilesi.com/ > > _______________________________________________ > > Lista de distribución Ovillo > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > http://lists.ovillo.org/mailman/listinfo/ovillo > > > > _______________________________________________ > > Lista de distribución Ovillo > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > http://lists.ovillo.org/mailman/listinfo/ovillo > > > > > > -- > Marcos Méndez Filesi > http://www.mmfilesi.com/ > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > -- Marcos Méndez Filesi http://www.mmfilesi.com/ _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
