Avisos
Vaciar todo

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

 
Daniel
 Daniel
Usuario experto

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 10:14 am
Pepe
 Pepe
Soporte CMS Webempresa 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 10:46 am

Daniel
 Daniel
Usuario experto

@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 11:57 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa 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 1:30 pm

Cursos Gratuitos WordPress

Daniel
 Daniel
Usuario experto

@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 10:12 pm