Estilo de insignias de confianza en página de producto

lorenaauto64

Hola a todos, estoy con un pequeño quebradero de cabeza en mi tienda PrestaShop 1.7.3.3. Estoy intentando darle un mejor estilo a las insignias de confianza (SSL, devoluciones, envío rápido) y los iconos de pago que aparecen justo debajo del botón 'Añadir al carrito' en la página de producto.

Quiero que se vean limpios, alineados con flexbox, con un pequeño borde y que no se deformen en móvil. Actualmente, estoy intentando aplicar esto en themes/classic/assets/css/custom.css pero en móvil se me desajusta todo y los iconos se encogen demasiado. Aquí tenéis lo que estoy probando:

.product-information .product-actions .product-guarantees {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  border: 1px solid #eee;
  padding: 10px;
}
.product-guarantees > div {
  text-align: center;
  flex: 1;

¿Alguna idea de cómo puedo mejorar esto, especialmente para que no se deforme en pantallas pequeñas?

felix_vlc69

Hola @lorenaauto64, ¿qué tal? A mí me pasó algo similar en una tienda con PS 1.7.3 también. Cuando tienes varios elementos flex en una fila, si no les das una base o les permites encogerse, el navegador intenta ajustarlos como puede y los iconos sufren. Tu flex: 1; está diciendo que cada div hijo ocupe el mismo espacio, lo cual es genial en escritorio, pero en móvil cuando no hay espacio suficiente, los iconos dentro de esos div tienden a reducirse con el texto. Te falta controlar el flex-shrink y quizás un flex-wrap para que se apilen si es necesario.

Milo

Hola @lorenaauto64 y @felix_vlc69. El problema que comentas es muy común con el tema Classic y la adaptación a móvil, especialmente en PrestaShop 1.7.3.3 que no siempre gestiona bien los saltos de línea en flex. Es importante asegurar que el contenedor de las insignias utilice flex-wrap para permitir que los elementos se apilen, y que cada insignia individual tenga un flex-shrink: 0 para mantener su tamaño mínimo, junto con una base de ancho.

Aquí os dejo un CSS modificado para vuestro archivo custom.css que debería resolver la deformación en móviles y mejorar la alineación general:

.product-information .product-actions .product-guarantees {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en nuevas líneas */
  justify-content: center; /* Centra los elementos */
  align-items: flex-start; /* Alinea al inicio si hay varias líneas */
  margin-top: 15px;
  border: 1px solid #eee;
  padding: 10px 5px;
}
.product-guarantees > div {

Con flex-wrap: wrap; el contenedor permitirá que los div hijos salten de línea cuando no haya espacio. justify-content: center; los centrará, y flex: 0 0 calc(33.33% - 10px); junto con flex-shrink: 0; asegura que cada insignia intente ocupar un tercio del espacio (o el 100% en móvil) y que no se encoja más allá de su flex-basis.

lorenaauto64

¡Increíble, @Milo! He aplicado tu código en mi custom.css de la tienda PrestaShop 1.7.3.3 y es justo lo que necesitaba. Las insignias ahora se ven perfectamente alineadas, mantienen su tamaño en móvil y el flex-wrap hace que se reorganicen de forma muy limpia. ¡Muchas gracias por la explicación tan detallada y por la solución!