Productos woocommerce en movil

  • carlosboom

    (@carlosboom)


    hace 3 años, 10 meses

    Muy buenas a todos, tengo un problema con la visualizacion de mis productos de wocommerce en el movil, quise modificar el css para que mis productos se visualizaran en dos columnas,y lo conseguí, pero no se porque, algunos productos salen en solitario, el codigo que utilicé es el siguiente:

    @media (max-width: 767px) {
    div.woocommerce ul.products li.product {
    flex-basis: 50%;
    max-width: 50%;
    }
    }

    Pueden ayudarme?

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • Moderador kallookoo

    (@kallookoo)

    hace 3 años, 10 meses

    Hola @carlosboom

    Segun veo el theme usa grid para mostrar los elementos y no flex.
    Asi que flex-basis no tiene efecto.
    Despues utilizas el 50% en el max-width pero no contemplas el margen y relleno que se pueda añadir. Revisalo y ajustalo para que no te pase.

    Iniciador del debate carlosboom

    (@carlosboom)

    hace 3 años, 10 meses

    Muchas gracias @kallookoo , y cual seria lo correcto en lugar de flex-basis? disculpame pero soy novato en esto.
    Gracias de antemano

    • Esta respuesta fue modificada hace 3 años, 10 meses por carlosboom.
    Moderador kallookoo

    (@kallookoo)

    hace 3 años, 10 meses

    En teoria ya que no lo he probado en tu web, por ejemplo podrias poner:
    max-width: 45%; en vez del 50% para evitar que alguno quede solo.
    Tambien podrias contactar con el author del theme ya que comentas que estas empezando y mirar si podria ayudarte para que se vea en dos columnas, quien mejor que el creador para sabe que CSS modificar sin provocar ningun error.
    Otra seria que examinaras el CSS para comprobar el estilo de los productos y crear unas nuevas reglas, y modificarlo para que quede como tu quieres, solo que deberias entender mas o menos de CSS, pero usando el inspector del navegador y paciencia lo podria hacer.

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • El debate ‘Productos woocommerce en movil’ está cerrado a nuevas respuestas.

Etiquetas