Imágenes miniatura en galería de producto

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

Hola Leo,

En el siguiente enlace puedes ver un producto de mi sitio:

https://www.rebajaslocas.com/hogar-y-cocina/bolsas-con-cierre-para-refrigerios/

¡Gracias!

Hi there,

you can try this CSS:

.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  justify-content: center;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: unset;
  padding: 5px;
  max-width: 60px;
}

Check carefully as this CSS may have unexpected consequences on the the carousel behaviour.

Hola David,

El código funcionó perfectamente, aunque no deseo que se aplique en móviles. Solo en escritorio.

¿Podrías ayudarme con esto?

¡Gracias!

You can wrap David's code in the desktop media query here:
https://docs.generatepress.com/article/responsive-display/

Hola Leo,

Podrías ayudarme con ese código? Yo la verdad no soy diseñador y no tengo idea de cómo hacerlo.

¡Gracias!

Hola Leo,

Si quiero que el código que David me dio solo funcione para escritorio y tablets, el código sería así?

@media (min-width: 1025px) {
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  justify-content: center;
}
.woocommerce div.product div.images .flex-control-thumbs li {
  width: unset;
  padding: 5px;
  max-width: 60px;
}
}

I would go with this:

@media (min-width: 769px) {
    .woocommerce div.product div.images .flex-control-thumbs {
        display: flex;
        justify-content: center;
    }
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: unset;
        padding: 5px;
        max-width: 60px;
    }
}

Muchas gracias Leo y David!

No problem :)