Avisos
Vaciar todo

[Resuelto] Columnas de productos en versión móvil

5 Respuestas
3 Usuarios
0 Reactions
27 Visitas
Respuestas: 69
Trusted Member
Topic starter
 

Buenos días.

Una consulta. En la versión desktop de esta url:

https://www.mymobilhome.es/categoria-producto/ocasion/

aparecen 3 columnas de productos, pero en la versión móvil una sola columna con las imágenes, ¿se podría hacer que en la versión para móvil aparezcan dos columnas disminuyendo el tamaño de las imágenes?.

Gracias.


 
Respondido : 21/08/2020 9:14 am
Pepe
 Pepe
Respuestas: 41115
Illustrious Member Admin
 

Hola Daniel.

 ¿se podría hacer que en la versión para móvil aparezcan dos columnas disminuyendo el tamaño de las imágenes?.

Se podría pero eso dificultará la usabilidad del usuario en la versión móvil ya que las imagenes estan muy juntas además que es posible que google te envíe avisos de que la usabilidad no es buena al tener elementos muy juntos.

 

Puedes modificarlo añadiendo lo siguiente:

@media screen and (max-width: 414px) {
.woocommerce #wc-column-container.wc-mobile-columns-1 .products {
grid-template-columns: repeat(2,1fr)!important;
}
}

 

Un saludo

 


 
Respondido : 21/08/2020 9:46 am
Respuestas: 69
Trusted Member
Topic starter
 

@pepesoler

Gracias Pepe, como de costumbre lo has "clavao", funciona en el móvil a la perfección, incluso en la opcion "Nuevas", que es igual a esta misma página pero con otro tipo de productos. En ambas, perfecto.

Lo que ocurre es que en "Outlet" (es una página casi igual a las dos anteriores pero tipo "custom"), en la versión móvil aparecen dos casas, pero con el tamaño "antiguo" (muy grande) y descoloca el menú y todos los demás elementos. ¿Se podría ajustar también para que tenga el mismo tamaño que las otras dos opciones anteriores?. La url es esta:

https://www.mymobilhome.es/categoria-producto/outlet/

Por supuesto, tendré muy en cuenta tu observación acerca de la usabilidad y avisos de google, sólo estoy haciendo pruebas entre desktop y móvil para dejar ya una versión definitiva instalada. 

Agradecidísimo de nuevo tanto por tu ayuda como por tus buenos consejos.

Un cordial saludo.

 


 
Respondido : 21/08/2020 10:57 am
Karen Rios
Respuestas: 18667
Illustrious Member Moderator
 

Hola Daniel,

Entiendo que lo que deseas es que los productos en la URL de outlet aparezcan en dos columnas para la vista móvil también, si es así, prueba si el siguiente código CSS permite realizar lo que necesitas modificar.

@media screen and (max-width: 414px){
.term-outlet .inside-wc-product-image {
width: 140px!important;
height: auto!important;
}
}

Un Saludo 😊 


 
Respondido : 21/08/2020 12:30 pm
Respuestas: 69
Trusted Member
Topic starter
 

@karen

¡Graciiiiaaaaaasssss!. Ahora la versión móvil queda igual (2 columnas) en todas las opciones de compra de productos 😊 . Será cuestión finalmente de decidirse por una columna o dos en función de SEO, Google, comentarios de los usuarios... Pero genial, lo más difícil ya está.


 
Respondido : 21/08/2020 9:12 pm