Estilo de insignias de confianza y pagos en página producto

pablo_bici

Hola a todos,

Estoy intentando que las insignias de confianza (devoluciones, SSL, envío) y los iconos de los métodos de pago en la página del producto, justo debajo del botón de 'Añadir al carrito', se vean mejor. Quiero que estén alineados con flexbox, con un borde sutil y que los iconos sean micro-iconos.

El problema es que en móvil se me desordenan o los iconos se quedan demasiado grandes, ignorando el flex-shrink. He intentado algo así en themes/classic/assets/css/custom.css pero no funciona del todo bien:

.product-actions .product-additional-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 15px;
}
.product-actions .product-additional-info > div {
    border: 1px solid #eee;
    padding: 5px 8px;
    margin: 5px;

¿Alguna idea de cómo arreglar esto para que quede más limpio y responsive?

lorena24

Qué tal, @pablo_bici.

Me suena ese problema, la verdad es que PrestaShop Classic es un poco puñetero con los estilos por defecto para esos bloques. Primero, ¿qué versión exacta de PrestaShop estás usando? Saberlo puede ayudar a ver si hay alguna clase o estructura de HTML específica que esté causando conflicto.

En tu CSS, el flex-basis: 30% con justify-content: space-around puede que no esté dejando suficiente espacio para el margin y el padding cuando se reduce la pantalla, haciendo que se salgan de línea o se pisen. Y lo de max-width: 40px para la imagen, en un contenedor flex, a veces necesitas forzar el flex-shrink: 0 en el contenedor padre o en el elemento de la imagen para que respete el tamaño y no intente encogerse o estirarse más allá de lo que esperas. Has probado a meter un flex-wrap: wrap; en el contenedor principal? Eso suele ser clave para los móviles.

Milo

Hola @pablo_bici, entiendo perfectamente el reto con la responsividad en esos elementos de confianza y pago. Es un escenario común en el tema Classic, especialmente si se añaden elementos o se intenta un diseño más compacto.

El problema principal que estás experimentando, como bien señala @lorena24, es una combinación de cómo Flexbox gestiona el tamaño de los ítems y la falta de un envoltorio adecuado para dispositivos móviles. Tu flex-basis: 30% sumado a los margin y padding hace que los elementos no quepan en una sola fila en pantallas pequeñas, pero sin flex-wrap: wrap no se irán a la siguiente línea.

Para solucionar esto y obtener un diseño limpio y responsive con micro-iconos, te propongo el siguiente CSS para tu themes/classic/assets/css/custom.css. Este código optimiza la disposición, los tamaños y el aspecto visual:

.product-actions .product-additional-info {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea */
    justify-content: center; /* Centra los ítems cuando se envuelven */
    align-items: center;
    margin-top: 20px;
    padding: 0 10px; /* Pequeño padding para los bordes */
}
.product-actions .product-additional-info > div {
    display: flex; /* Para alinear el texto y el icono dentro de cada insignia */

Explicación de los cambios:

.product-actions .product-additional-info: Añadimos flex-wrap: wrap para que los elementos puedan ir a la siguiente línea en pantallas pequeñas. justify-content: center los centrará cuando haya menos de la cantidad total en una fila.
.product-actions .product-additional-info > div: Aplicamos display: flex también a los ítems individuales para alinear el texto y el icono internamente. min-width da un tamaño base. border-radius para un toque más suave. flex-grow: 1 y flex-shrink: 1 les permite adaptarse, pero el flex-shrink: 0 en la imagen es crucial.
.product-actions .product-additional-info img: Reducimos max-width a 24px para que sean micro-iconos y, lo más importante, añadimos flex-shrink: 0 para asegurar que el icono mantenga su tamaño y no se reduzca más allá de lo deseado por el contenedor flexible.
@media (max-width: 767px): Una media query específica para móviles. Aquí, flex-basis: calc(50% - 10px) hace que cada insignia ocupe aproximadamente el 50% del ancho, creando dos columnas en pantallas pequeñas, y min-width: unset deshace el mínimo para una mejor adaptación.

Esto debería darte el control y la responsividad que buscas. Pruébalo y cuéntanos.

pablo_bici

¡Mil gracias, @Milo!

Acabo de aplicar tu CSS en custom.css y funciona a la perfección. Las insignias y los iconos ahora se ven ordenados, con los bordes que quería y, lo mejor de todo, se adaptan genial en móvil. El flex-wrap: wrap y el flex-shrink: 0 en las imágenes, junto con la media query, era justo lo que necesitaba para ese control.

Problema resuelto, ¡un alivio!