Avisos
Vaciar todo

[Resuelto] Centrar tachado

10 Respuestas
2 Usuarios
1 Reactions
107 Visitas
Respuestas: 30
Eminent Member
Topic starter
 

Hola!

En los productos rebajados, aparece una línea de tachado sobre el precio original. El problema que tengo, es que esa línea no está centrada, por alguna razón me aparece encima del precio y queda fatal. Esto me pasa tanto en la ficha del producto como en el listado de los productos. (adjunto imágenes)

 

¿Hay alguna manera de centrar dicha línea para que quede justo en medio del precio?

Captura de pantalla 2023 03 22 083034
Captura de pantalla 2023 03 22 082343

Muchas gracias!

Contenido solo visible a usuarios registrados


 
Respondido : 22/03/2023 7:32 am
Pepe
 Pepe
Respuestas: 41129
Illustrious Member Admin
 

Hola Carlos.

Prueba añadir lo siguiente en Apariencia -> Personalizar -> CSS adicional

.price del {
text-decoration: underline;
text-underline-offset: -8px;
}

 

Un saludo


 
Respondido : 22/03/2023 12:19 pm
Respuestas: 30
Eminent Member
Topic starter
 

Hola Pepe!

Ahora la línea sale a la altura perfecta, pero curiosamente, se ve entrecortado, como si hubiera pasado detrás de la cifra. 

tachado

 
Respondido : 22/03/2023 12:44 pm
Pepe
 Pepe
Respuestas: 41129
Illustrious Member Admin
 

Hola Carlos.

Ok, elimina el código anterior y prueba con este:

.price del{
text-decoration: underline 0.2em solid #ff5733!important;
text-decoration-skip-ink: none:
text-underline-offset: -8px;
}

 

Un saludo


 
Respondido : 22/03/2023 3:03 pm
Respuestas: 30
Eminent Member
Topic starter
 

Hola!

Ahora se ha ido abajo.

He pegado el código en personalizar/Css adicional y también, para probar, en el apartado para añadir CSS que trae el Theme Avada. Al pegarlo en Avada, la línea que te pongo abajo, aparecía con una x roja y un mensaje de error. 

text-decoration-skip-ink: none:

En el mensaje de error decía esto: Unknoun property text-decoration-skip-ink: none: Expected RBRACE at line 80, col 31

Ni idea!

aa

 
Respondido : 22/03/2023 3:28 pm
Pepe
 Pepe
Respuestas: 41129
Illustrious Member Admin
 

Hol Carlos.

Ufff perdón que puse : en vez de ; para cerrar una etiqueta.

El código es este:

.price del{
text-decoration: underline 0.2em solid #ff5733!important;
text-decoration-skip-ink: none;
text-underline-offset: -8px;
}

 

Un saludo


 
Respondido : 22/03/2023 3:41 pm
Respuestas: 30
Eminent Member
Topic starter
 

Sin problema Pepe, cosas que pasan 😉

Mira, he cambiado el color por uno gris, y sigue apareciendo detrás del número. Así ya se ve bastante mejor que al principio, pero si quedara delante ya sería la perfección.

b

 

Muchas gracias!


 
Respondido : 22/03/2023 3:54 pm
Pepe
 Pepe
Respuestas: 41129
Illustrious Member Admin
 

Hola Carlos

El problema es que se usa una decoración de texto y este estará por detrás, al utilizar la misma clase para el texto y la línea no se puede modificar su posición.

Puedes probar con esto pero no te aseguro que funcione:

.price del{
text-decoration: underline 0.2em solid #ff5733!important;
text-decoration-skip-ink: none;
text-underline-offset: -8px;
text-underline-position: above;
}

 

Un saludo

 


Esta publicación ha sido modificada el hace 2 años por Pepe
 
Respondido : 22/03/2023 4:04 pm
Carlos C reaccionó
Respuestas: 30
Eminent Member
Topic starter
 

Perfecto Pepe! Así queda muy bien también.

Muchas gracias!

Un saludo!


 
Respondido : 22/03/2023 4:11 pm
Pepe
 Pepe
Respuestas: 41129
Illustrious Member Admin
 

Hola Carlos.

Genial !!! Me alegra que al final lo solucionaras.

Cualquier consulta que tengas no dudes en comunicarlo.

 

Un saludo


 
Respondido : 22/03/2023 4:14 pm