Soporte » WordPress Avanzado » 2 columnas en Woocomerce OCEANWP

  • Hola y gracias ya de antemano por el tiempo empleado en intentar ayudarme.
    Llevo varios dias viendo en internet como conseguir que a la hora de ver los productos de la tienda en el movil se vean en dos columnas y no en una super grande.
    He probado varios CSS que he visto y ninguno me ha funcionado.
    No se si sera porque tengo otros CSS haciendole la contra o sencillamente no lo hago bien.
    Actualmente no veo opciones de cambiarlo sin CSS. Solo en el panel de Personalizar pero solo personalizo las columnas de la tienda en modo «pantalla ordenador», q actualmente las tengo en 3. Y esta bien asi, pero en movil se ve solo una y super grande.

    Como vereis a lo mejor no se ni explicarme, cualquier ayuda sera buena, muchas gracias de nuevo.

    Tema que uso: OceanWP

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

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • Hola @thepowhouseshop

    Viendo tu web, veo que usan !important en la definicion del ancho del grid y eso es bastante probable que sea el causante.
    Usando las media queries deberas crear una nueva regla mas agresiva como por ejemplo:

    
    @media only screen and (max-width: 767px) {
      body .oceanwp-row .col.span_1_of_3:not(.slick-slide) {
        width: 50% !important;
      }
    }
    

    No la probe, pero deberia funcionar

    Iniciador del debate thepowhouseshop

    (@thepowhouseshop)

    muchas gracias kallookoo !! No me llega afuncionar del todo, pero algo hace. y ya es bastante. ahora se me queda como un espacio de un producto en blanco cada 3 productos. he intentado cambiando .col.span_1_of_3:not x .col.span_1_of_2:not. Pero no es eso. faltaria pulirlo un poco el css. Gracias por tu ayuda de verdad. me ayuda mucho.

    Hola @thepowhouseshop

    Veamos, ese theme usa un sistem de rejilla (grid) y utiliza diferentes clases para crearlo.
    No entrare en detalles, pero estaria bien para que lo entiendas que lo busques en internet y mires el CSS del propio theme para tener mas informacion.
    En resumidas cuentas si tienes 3 cuadrados y no caben de ancho el tercero pasa a la parte de abajo, creado un efecto de un codo a 90%.
    Las media queries, se usa para definir donde se aplican las reglas, yo te puse un ejemplo pero tienes que ver si es necesario modificar el ejemplo o añadir mas.

    Como es un theme bastante utilizado, es posible que en el propio foro del theme ya tenga la solucion a tu consulta o puedes probar si el author te lo puede dar ya que quien mejor lo conoce es el, sino tienes los conocimientos suficientes.

    Hola yo quisiera realizar que en la vista galeria de los prodcutos de la web en la version movil, se vean 2 productos en 1 columna, y asi das una mejor navegacion al usaurtio, la pagina es 1makeups.com agaradeceria su ayuda.

    • Esta respuesta fue modificada hace 2 semanas, 2 días por auricelccc.
    kallookoo

    (@kallookoo)

    Hola @auricelccc

    Basicamente tienes que hacer lo mismo que @thepowhouseshop modificar las media queries para cambiar el ancho del producto.

    
    @media only screen and (max-width: 767px) {
      body .oceanwp-row .col.span_1_of_4:not(.slick-slide) {
        width: 50% !important;
      }
    }
    

    En tu caso diria que el codigo anterior te deberia servir.

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • Debes estar registrado para responder a este debate.