Columnas de productos en smartphone

[j0niSnip3r]

Tengo un problema que veo en las columnas de productos para smartphone (woocommerce) superpuestas, el orden no es correspondiente (deben ser 2 productos por fila y no 4).

No sé cómo hacer ese cambio.
¿Pueden ayudarme a ver el responsive.css?

El enlace es: http://www.benditaflor.cl (el problema es solo en smartphone ... En tablets se ve todo bien)

Gracias y espero que puedan ayudarme :)

[ipraetoriux]

tenes que modificar este estilo

Código CSS:

.product-list li, .related li, .upsells li {width: 22.3% !important;}
 

tenes que agregar un media query, y determinar, que si el viewport es menor a por ejemplo 300px, cada producto te ocupe el 100%, asi se ordenan uno debajo del otro

Código CSS:

@media only screen and (max-width: 300px){
 .product-list li, .related li, .upsells li {width: 100% !important;}
 
}
 

[j0niSnip3r]

No funciona :(

El problema es cuando uno entra a cualquiera de las categorías de la pestaña "Productos". Al entrar a 'Ramos', 'Bouquets' o 'Arreglos' es cuando se ven todos los productos superpuestos en columna de 4 y no de 2.

Agradezco tu ayuda @ipraetoriux ojalá puedas seguir ayudándome.

[ipraetoriux]

...pues si funciona, lo acabo de probar nuevamente y funciona perfecto, vos tenes que determinar a partir de que tamaño de pantalla va a cambiar como se ven las columnas, yo acá a modo de ejemplo te puse 300px, y luego con el width tenes que ir calculando los porcentajes para que queden en 2 columnas, yo aca te puse a modo de ejemplo 100% para que se vea todo en una columna, que por lo general es lo habitual en los móviles...

...te dejo unos links sobre media jquery

http://webdesignerwall.com/tutorials...-media-queries
http://mobile.smashingmagazine.com/2...-your-website/
http://www.cristalab.com/tutoriales/...-css-c105349l/

...en que navegador lo estas mirando?, mira que los media query no funcionan para IE 8 y menores, ahi tienes que usar esto http://code.google.com/p/css3-mediaqueries-js/

[j0niSnip3r]

he agregado:

@media only screen and (max-width: 300px){
.product-list li, .related li, .upsells li {width: 100% !important;}

}

al archivo responsive.css (http://www.benditaflor.cl/wp-content...responsive.css) como puedes en las últimas líneas.

Lo estoy probando en Chrome (última versión) y desde el navegador achicando la ventana para que se convierta pero sigue igual. Cuando entro desde mi smartphone tampoco veo el cambio :(

[pzin]

¿Desde qué móvil lo estás probando? Hay pocos móviles que su ancho sea igual o menor que 300 pixeles —lo normal son 320—, y en Chrome no se puede reducir el ancho del navegador a menos de 400 pixeles. Usa mejor Firefox para probar tus diseños responsivos.

[j0niSnip3r]

OK! lo estaba probando desde galaxy s (i9000).. es verdad que chrome no soporta menos de 400.. pero ya lo he solucionado.

He agregado el siguiente código el cual funciona perfecto (en portrait)!!

@media only screen and (max-width: 320px) {
.product-list li, .related li, .upsells li {
width: 48% !important; }

}

pero cuando lo pongo en landscape aún se me sobrepuesto algunos productos.

¿Cómo puedo hacer que para landscape el % del width sea especifico? ya que con 48% en portrait me caben 2 columnas... para landscape deberían ser 3. ¿Debo crear otro media query para aquel tamaño?

Espero puedan ayudarme :)
Saludos y muchas gracias por todo.

[pzin]

Cuanto más simple quede el código mejor. Si tiene que ser una medida diferente en otro ancho de pantalla diferente, si claro, declara otra media querie. Aunque date cuenta que te quedarán, a priori, columnas más estrechas. Ahí ya ves como quede mejor.

Lo de la simplicidad es importante, por cuestiones estéticas, mantenimiento, carga, etc. Intenta mantener una lógica, por ejemplo, si cuando la pantalla es de 1024 y usas cinco columnas por fila, no uses tres cuando se vea en 320, sino una o dos.

E intenta también evitar el uso de !important, no es buena práctica hacerlo porque si. Si tus declaraciones están bien ordenadas no es necesario. En tu caso, al usar max-width, si ordenas en orden descendente, por herencia aplicaría las últimas reglas.