Soporte » Diseño – Temas y plantillas » Productos woocommerce en movil

  • 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)
  • 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.

    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 1 semana, 4 días por carlosboom.

    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)
  • Debes estar registrado para responder a este debate.