Hola @lorenamadrid, @patriciadigital tiene razón. El float: left es la raíz de tus problemas de alineación. En PrestaShop 1.7.8.11, el tema Classic usa Flexbox en muchos de sus contenedores, y float y flexbox no se llevan bien. Además, para el tamaño de la fuente, siempre es mejor usar media queries para asegurar la legibilidad en diferentes dispositivos.
Para solucionarlo, primero elimina la propiedad float: left de tu estilo base .urgent-delivery-badge. Luego, añade estas reglas CSS a tu custom.css para los ajustes en móvil. Esto desactivará el flotado y ajustará el tamaño y el centrado para pantallas pequeñas:
@media (max-width: 767px) {
.product-details .urgent-delivery-badge {
float: none; /* Desactiva el flotado problemático */
display: block; /* Para que ocupe su propia línea */
font-size: 0.9em; /* Tamaño más legible en móviles */
margin: 10px auto; /* Centrado y añadir espacio */
}
}
Con display: block y margin: 10px auto, el badge se centrará en pantallas móviles. El font-size: 0.9em lo hará más legible. Asegúrate de compilar el CSS o limpiar la caché si no ves los cambios inmediatamente. Para el punto de pulso, puedes usar un pseudo-elemento ::before con un animation similar al que ya tenías, pero el problema principal era la alineación.