Avisos
Vaciar todo

[Resuelto] css banda agotado

10 Respuestas
3 Usuarios
0 Reactions
38 Visitas
Respuestas: 399
Reputable Member
Topic starter
 

He ajustado la banda de agotado, del plugin de yith, para la version movil. Pueden ayudarme a ajustarla para la version movil? se ve demasiado arriba y a la derecha...

Tambien veo que en el ordenador sobresale una zona de la izquierda. No se si esto tambien es posible ajustarlo con css

Gracias!

 

IMG 7672EF10E06B 1

 

 

Captura de pantalla 2022 03 24 a las 19.27.23

Contenido solo visible a usuarios registrados


 
Respondido : 24/03/2022 6:28 pm
Bruno
Respuestas: 6485
Illustrious Member Moderator
 

Que tal Lourdes,

Puedes probar con los siguientes estilos

.yith-wcbm-badge{
top: 8%;
left: -27%;
}
@media(max-width:425px){
.yith-wcbm-badge{
top: 10%;
left: -36%;
}
}

Saludos!


 
Respondido : 24/03/2022 6:42 pm
Respuestas: 399
Reputable Member
Topic starter
 

@bruno-vichetti Lo he puesto pero no veo que haya funcionado, tambien añadi !important y nada


 
Respondido : 24/03/2022 7:46 pm
Bruno
Respuestas: 6485
Illustrious Member Moderator
 

Hola Lourdes,

En efecto aplicando !important los hacemos visibles pero veo que no lo has colocado de la forma correcta

image

Arreglemos los estilos de la siguiente forma

.yith-wcbm-badge{
top: 8% !important;
left: -27% !important;;
}
@media(max-width:425px){
.yith-wcbm-badge{
top: 10% !important;;
left: -36% !important;;
}
}

Asi debería de verse 😊 

image

Saludos!


 
Respondido : 24/03/2022 8:11 pm
Respuestas: 399
Reputable Member
Topic starter
 

@bruno-vichetti Ya esta en su lugar, veo que en el apartado dentro del producto agotado no se visualiza donde deberia, ni en movil ni ordenador. Sabrian como solucionarlo?


 
Respondido : 24/03/2022 10:54 pm
Bruno
Respuestas: 6485
Illustrious Member Moderator
 

Hola Lourdes,

Vale veo el desajuste en la vista detalle del producto, para que se ajuste unicamente en los listados de productos volvamos a modificar el CSS a lo siguiente

.elementor-grid .yith-wcbm-badge{
top: 8% !important;
left: -27% !important;;
}
@media(max-width:425px){
.elementor-grid .yith-wcbm-badge{
top: 10% !important;;
left: -36% !important;;
}
}

Prueba y nos comentas, Saludos!


 
Respondido : 24/03/2022 11:11 pm
Respuestas: 399
Reputable Member
Topic starter
 

@bruno-vichetti Buenas tardes, ahora mismo con los ajustes que me enviaron no se visualiza en ordenador correctamente, ni en listado de producto ni dentro del mismo. Adjunto captura:

 

Captura de pantalla 2022 03 28 a las 13.55.21
Captura de pantalla 2022 03 28 a las 13.55.36

 
Respondido : 28/03/2022 11:57 am
Karen Rios
Respuestas: 18675
Illustrious Member Moderator
 

Hola Lourdes, 

En este caso para que estos cambios solo se apliquen a la versión móvil, elimina el código anterior y prueba el siguiente 

@media only screen and (max-width: 600px) {
.elementor-grid .yith-wcbm-badge{
top: 8% !important;
left: -27% !important;;
}
@media(max-width:425px){
.elementor-grid .yith-wcbm-badge{
top: 10% !important;;
left: -36% !important;;
}
}
}

Verifica si con ello se logran visualizar de forma correcta en escritorio

Un Saludo


 
Respondido : 28/03/2022 12:55 pm
Respuestas: 399
Reputable Member
Topic starter
 

@karen 

En el movil ahora se visualiza asi:

IMG 8538

 

En el ordenador se visualiza asi:

 

Captura de pantalla 2022 03 28 a las 15.28.04

 

Captura de pantalla 2022 03 28 a las 15.27.47

 


 
Respondido : 28/03/2022 1:31 pm
Karen Rios
Respuestas: 18675
Illustrious Member Moderator
 

Hola Lourdes, 

Disculpa no comprendo en este caso que deseas cambiar, coméntanos exactamente cuál es el cambio que deseas hacer, de esta forma podemos revisarlo con mayor detalle. 

Un Saludo 


 
Respondido : 28/03/2022 2:22 pm