Estilo de sellos de confianza y métodos de pago

antoniovlc

¡Hola a todos!

Estoy intentando darle un lavado de cara a mi página de producto y quiero personalizar el estilo de los sellos de confianza (SSL, devoluciones, envío rápido) y los iconos de pago que aparecen justo debajo del botón de 'Añadir al carrito'.

Quiero que estén bien alineados, con un borde sutil y que se vean bien en móvil, pero me están dando problemas. En pantallas pequeñas, los iconos se amontonan o se encogen demasiado, y el diseño se rompe. He intentado algunas cosas en custom.css pero no doy con la tecla.

Este es mi CSS actual para esa sección:

.product-information .product-actions .product-trust-badges {
    display: block;
    margin-top: 15px;
    text-align: center;
    padding: 10px;
}
.product-information .product-actions .product-trust-badges img {
    max-width: 50px;
    height: auto;
    margin: 0 5px;

Con display: block se me apilan y no quedan bien centrados ni distribuidos. ¿Alguna idea de cómo puedo conseguir una alineación limpia y que los iconos no se deformen en móvil?

nataliabici29

Hola @antoniovlc,

Entiendo perfectamente lo que comentas. Ese display: block hace que cada imagen sea un bloque y por eso se te apilan, es el comportamiento normal. Para alinearlos en una fila, deberías usar display: flex en el contenedor padre. Pero ojo, que solo con flex no basta si quieres que los iconos mantengan su tamaño en móvil.

Por cierto, ¿qué versión exacta de PrestaShop estás usando? A veces, el tema Classic tiene pequeñas diferencias entre las versiones 8.0, 8.1 y 8.2 que pueden afectar al comportamiento del CSS.

marta_tienda30

¡Exacto, @nataliabici29! Yo también me volví loca con eso. @antoniovlc, si usas display: flex, recuerda que los hijos por defecto intentarán encogerse para caber. Para evitar que tus imágenes de iconos se hagan minúsculas en móvil, tienes que añadir flex-shrink: 0; a los img.

También te recomendaría envolver todos tus sellos en un div con esa clase .product-trust-badges si no lo están ya, y centrarlo todo con justify-content: center y align-items: center en el flex container. Así quedan mucho más organizados.

Milo

Hola @antoniovlc,

Las compañeras @nataliabici29 y @marta_tienda30 van por buen camino. El problema principal es que display: block fuerza a los elementos a apilarse. Para lograr la alineación que buscas y asegurar una buena visualización en dispositivos móviles, necesitas usar Flexbox correctamente.

Para PrestaShop 8.2.2 y el tema Classic, la solución más limpia es aplicar display: flex al contenedor principal y luego controlar cómo se comportan los elementos hijos (las imágenes de los iconos) con propiedades como flex-wrap y flex-shrink.

Aquí tienes el código CSS modificado que puedes añadir a tu archivo themes/classic/assets/css/custom.css:

.product-information .product-actions .product-trust-badges {
    display: flex; /* Activa Flexbox */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea en pantallas pequeñas */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente */
    margin-top: 20px;
    padding: 10px 5px; /* Ajuste el padding para un mejor espaciado */
    border-top: 1px solid #f0f0f0; /* Añade un borde superior sutil como separador */
}
.product-information .product-actions .product-trust-badges img {

Explicación de los cambios:

display: flex;: Transforma el contenedor en un contenedor flex, permitiendo que sus hijos se coloquen en una fila.
flex-wrap: wrap;: Si no hay suficiente espacio en una sola línea (especialmente en móvil), los elementos se moverán a la siguiente línea en lugar de desbordarse.
justify-content: center; y align-items: center;: Centran tanto horizontal como verticalmente los iconos dentro de su contenedor.
flex-shrink: 0; en img: Esta es la clave para que tus iconos no se hagan minúsculos. Le dice al navegador que no permita que estos elementos se encojan más allá de su tamaño intrínseco, forzando flex-wrap a actuar si no hay espacio.
Ajustes en margin, padding, border y border-radius: Son pequeños retoques para mejorar la estética y el espaciado general.

Con estos cambios, tus sellos e iconos deberían verse mucho mejor y ser completamente responsivos.

antoniovlc

¡Mil gracias, @Milo! Y también a @nataliabici29 y @marta_tienda30 por los consejos.

He aplicado el CSS que me has dado en custom.css y ha funcionado a la perfección. La clave estaba en el flex-shrink: 0 que no conocía y que es justo lo que necesitaba para que los iconos no se deformaran en móvil. Ahora se ven centrados, con buen espaciado y se adaptan genial a todas las pantallas.

¡Problema resuelto! ¡Gracias de nuevo por la ayuda tan rápida y detallada!