Avisos
Vaciar todo

Apariencia pc y movil son tan distintas !! como puedo mejorarlas  

 
Rosa
 Rosa
Reputable Member

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

Citar
Respondido : 13/09/2021 10:04 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

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

Imagen de iOS

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 

 

ResponderCitar
Respondido : 13/09/2021 1:18 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Pepe
 Pepe
Soporte CMS Webempresa Moderator

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

ResponderCitar
Respondido : 13/09/2021 2:59 pm
Rosa
 Rosa
Reputable Member

@pepesoler

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

ResponderCitar
Respondido : 14/09/2021 10:34 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

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 

ResponderCitar
Respondido : 14/09/2021 12:41 pm
Rosa
 Rosa
Reputable Member

@karen

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

 

ResponderCitar
Respondido : 14/09/2021 7:05 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

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 

ResponderCitar
Respondido : 14/09/2021 7:07 pm
Rosa
 Rosa
Reputable Member

@karen

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

 

https://www.loom.com/share/b41d9f9e06ea4cda8355203bfb6c1005

ResponderCitar
Respondido : 15/09/2021 11:31 am

Cursos Gratuitos WordPress

Pepe
 Pepe
Soporte CMS Webempresa Moderator

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

ResponderCitar
Respondido : 15/09/2021 11:42 am