Avisos
Vaciar todo
Hola que tal:
Tengo theme Kadence y siguiendo vuestras recomendaciones he puesto un slider en inicio, para que pueda poner texto.
Pero que pasa que en el movil se ve horrendo!! y ademas solo sale el texto, y la imagen no.
He visto que la altura de las dos imagenes del slide son diferentes y tengo que arreglarlo.
Te paso video: https://www.loom.com/share/69adc93871d44e28addf6f5440b2a232
Alguna sugerencia?
Gracias
Contenido solo visible a usuarios registrados
Respondido : 13/09/2021 10:04 am
Hola Rosa,
He ingresado a la URL que nos compartes desde el móvil y veo que el slider se adapta, te adjunto una captura de lo que veo
Ten en cuenta que en ocasiones la vista previa que muestra el constructor no es muy precisa por lo que en este caso es recomendable siempre estar verificando los cambios en un dispositivo móvil directamente
Verifica esto y nos comentas como ha ido todo
Un Saludo
Respondido : 13/09/2021 1:18 pm
Hola Rosa.
Prueba con lo siguiente:
@media (max-width: 768px) {
.fl-builder-content .fl-node-613ee48ecae7c .fl-slide-0 .fl-slide-content {
background-color: transparent;
width: 100%;
height: auto;
}
.fl-content-slider .fl-slide-bg-photo {
position:absolute;
width: 100%;
background-size: contain;
}
}
Puedes añadirlo en apariencia -> Personalizar -> CSS Adicional.
Un saludo
Respondido : 13/09/2021 2:59 pm
Muchas gracias ahora veo la imagen con el texto en el slider pero.... el tamaño se ve raro , diferente y salta.
Bueno una video vale mas que mil palabras:
https://www.loom.com/share/229d04b8892442d285a383641e8cf7db
Gracias
Respondido : 14/09/2021 10:34 am
Hola Rosa,
Este espacio se muestra porque a tu slider se le está asignado un padding especifico a los textos y estos hacen que el contenido se muestre de una forma especifica en móvil para adaptarse, para solucionarlo prueba añadir al código CSS que te ha enviado Pepe lo siguiente
.fl-builder-content .fl-node-613ee48ecae7c .fl-slide-0 .fl-slide-content {
background-color: rgba(0,20,10,0.58);
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
El código debe quedar por ejemplo
@media (max-width: 768px) {
.fl-builder-content .fl-node-613ee48ecae7c .fl-slide-0 .fl-slide-content {
background-color: transparent;
width: 100%;
height: auto;
}
.fl-content-slider .fl-slide-bg-photo {
position:absolute;
width: 100%;
background-size: contain;
}
.fl-builder-content .fl-node-613ee48ecae7c .fl-slide-0 .fl-slide-content {
background-color: rgba(0,20,10,0.58);
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
}
Guarda los cambios y verifica si con ello te permite mostrarlo como necesitas
Un Saludo
Respondido : 14/09/2021 12:41 pm
Hola ha ido fenomenal. en el movil ok.
Aunque la imagen en el movil de fondo casi no se ve. la letras si. ¿Se puede hacer algo? o mejor hacer la imagen con las letras dentro?
Gracias
Respondido : 14/09/2021 7:05 pm
Hola Rosa,
No logro verificar lo que nos comentas, puedes enviarnos alguna captura como lo estas visualizando y lo que deseas añadir. De esta forma podemos verificar con mayor detalle
Un Saludo
Respondido : 14/09/2021 7:07 pm
Te paso video. Espero tus consejos.
Lo que quiero decir es que no se ve la imagen de detras, las máscara del texto es como si fuese muy grande. y no se como resaltar el texto delante de la imagen. No se si me he explicado
Respondido : 15/09/2021 11:31 am
Hola Rosa.
Prueba con esto:
@media (max-width: 768px){
.fl-builder-content .fl-node-613ee48ecae7c .fl-slide-0 .fl-slide-content {
background-color: rgba(0,20,10,0.20)!important;
}
}
Lo que hacemos en el código es añadirle un porcentaje de trasparencia para que el fondo se vea más claro.
Ten en cuenta que a los textos se les añade un color de fondo para que sean más visibles.
Un saludo
Respondido : 15/09/2021 11:42 am
