Problema de respons...
Avisos
Vaciar todo

[Resuelto] Problema de responsive en safari  

 
MONICA ALESSANDRA
 MONICA ALESSANDRA
Usuario activo

Hola muy buen día para todos

Soy nuevo en el foro y no se si este tema va en esta sección, si no va aquí perdóneme la molestias causadas.

Mi problema es la siguiente: tengo una web realizada con Joomla ultima versión, todo se ve bien en los navegadores comúnmente usados por Android y Windows, hasta ahora que lo pruebo en una Ipad mod. A1458, el responsive no se adapta, el logo en el cabezal se condensa y no se ve completo, al girar a modo horizontal los títulos del cabezal salta a la línea de abajo, un Row de iconos y textos se monta sobre la imagen, y no quiero ni pensar como se ve en un Iphone, ya que no tengo como visualizarlo, he consultado varias web: https://designmodo.com/responsive-test/ ,que te ofrecen el visual de varios formatos y supuestamente se ve algo mejor.

 

Gracias por su tiempo y su pronta respuesta.

Contenido solo visible a usuarios registrados

Respondido : 02/02/2021 11:18 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Monica,

Estuve verificando tu sitio web en el siguiente URL  Contenido solo visible a usuarios registrados y no logro ver lo que comentas para tablet, es posible que esto que nos comentas solo se muestre en una resolución determinada para tablet, puedes indicarnos bajo que resolución estas realizando la prueba de visualización?

Si es posible envíanos algunas capturas sobre los problemas responsive que nos comentas de esta forma podremos verificar con mayor detalle

Un Saludo

Respondido : 02/02/2021 11:27 am

Cursos Gratuitos WordPress

MONICA ALESSANDRA
 MONICA ALESSANDRA
Usuario activo

@karen

Hola Karen buen día y gracias por responder, el Ipad es mod A1458,

  • Pantalla Retina
  • Pantalla Multi-Touch retroiluminada por LED de 9,7 pulgadas (en diagonal) con tecnología IPS
  • Resolución de 2.048 por 1.536 a 264 píxeles por pulgada (p/p)

Aqui te envio link https://ibb.co/LvC6cny

https://ibb.co/DzTpCSJ  capturas de pantallas, desde el ipad, ayer revisé en un Iphone 6, en macbook pro (no se el modelo) y pasa lo mismo tanto con el cabezal y linea montado sobre textos.

 

Gracias por tu atención

Respondido : 03/02/2021 10:16 am
Pepe
 Pepe
Soporte CMS Webempresa Moderator

Hola Monica.

vamos a probar primero lo del logo.

Añade lo siguiente:

 
img.sp-retina-logo.hidden-xs {
width: 100%;
height: auto;
}

 

Puedes añadirlo en apariencia -> Personalizar -> CSS adicional.

 

Un saludo

Respondido : 03/02/2021 11:09 am

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

MONICA ALESSANDRA
 MONICA ALESSANDRA
Usuario activo

@pepesoler

Hola buen día Pepe,

Ya coloque el código y efectivamente el logo esta bien, pero muy pequeño para la versión Vertical ( trate de cambiar el parámetro de 100% a 150% y no modificó nada) y muy bien en la versión horizontal, en la versión horizontal el texto del menú ( Contáctenos) se baja hacia el body (carrusel de imágenes).

Link imagenes: https://ibb.co/kB8JF7D
https://ibb.co/XWxqWGX

Nuevamente Gracias por vuestras ayudas.

Respondido : 03/02/2021 1:11 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Monica,

En este caso prueba si el siguiente código CSS te permite modificar el tamaño del logo como deseas

.logo img {
max-width: 250px ;
}

Un Saludo

 

Respondido : 03/02/2021 1:42 pm

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

MONICA ALESSANDRA
 MONICA ALESSANDRA
Usuario activo

@karen 

Hola Karen, te cuento: con el código de pepe y el vuestro los combiné y pude logar que se vea bien el logo en la cabecera y una buena proporción,

img.sp-retina-logo.hidden-xs {
max-width: 250px;
height: auto;
}

Pero ahora tengo problema con el menu de cabecera, en la versión vertical: al desplegarse se ve cortado, y
en la versión horizontal la sección de contáctenos se salta para la línea de abajo, el puntaje de texto del cabezal es de 22px y
quisiera saber donde podría bajarlo a 18px, ya que es una plantilla y no puedo ni editar los icono del menu ni cambiar puntaje de letra,
creo que con eso la sección de contáctenos podría subir a donde corresponde.

Link de imágenes:
https://ibb.co/yY0DYqV
https://ibb.co/xMp4Jqv
https://ibb.co/4NHxPDf


Gracias por la ayuda prestada y espero nuevos comentarios.

Respondido : 04/02/2021 11:49 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Monica,

En este caso prueba con el siguiente código CSS y verifica si con ello el header y menú se adapta de forma correcta


@media only screen and (max-width: 990px) {
#sp-header .logo a {
line-height: 120px;
}

#sp-header {
height: 120px;
}

.sp-module.col-sm-4 {
width: 100%;
}

}

Un Saludo

Respondido : 04/02/2021 12:04 pm

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

MONICA ALESSANDRA
 MONICA ALESSANDRA
Usuario activo

@karen

Hola Karen, ya probé con tu código e hice una modificación, quedo el menu lateral muy bien en versión vertical, pero la versión horizontal  se acorto del lado 

izquierdo y la sección Contáctenos sigue igual. Gracias y espero comentarios

img.sp-retina-logo.hidden-xs {
max-width: 250px;
height: auto;
}

#sp-header {
height: 140px;
}

.sp-module.col-sm-4 {
width: 100%;
}

}

 

Link imágenes:

https://ibb.co/tDN9y5y
https://ibb.co/sqg3DqJ
https://ibb.co/kDp75p6

Respondido : 04/02/2021 12:48 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Holoa Monica,

Usualmente estos problemas son mas comunes cuando se trabaja con joomla, las plantillas o templates no están perfectamente pensadas a un máximo responsive.

Es por esto que el menú no se aplica de forma responsive al llegar a la resolución horizontal, como lo tienes verifica agregando los siguiente códigos css:

@media (min-width: 768px) and (max-width: 1024px){
.visible-sm {
display: block!important;
}}

@media (min-width: 768px) and (max-width: 1024px){
.hidden-sm {
display: none!important;
}}

Un saludo 🖐️ 

 

Respondido : 04/02/2021 1:24 pm

Cursos Gratuitos WordPress

MONICA ALESSANDRA
 MONICA ALESSANDRA
Usuario activo

@argenis

Hola buen día, gracias por tu código y por todas las ayudas del equipo WebEmpresa se pudo logra el ajuste de la web

al formato deseado, también gracias por su buena atención y pronta respuestas, anexo link del como quedó.

https://ibb.co/7yZ6cH1
https://ibb.co/tKgV8Tv
https://ibb.co/2sTKPnR
https://ibb.co/PMYnJ50

Respondido : 05/02/2021 10:04 am
Pepe
 Pepe
Soporte CMS Webempresa Moderator

Hola Monica.

Wooww Genial !!!! me alegra muchísimo que al final consiguieras solucionarlo 😉 

Gracias a ti por contactar con nosotros 😀 , cualquier consulta que tengas no dudes en comunicarlo 😉 

 

Cerramos el tema.

Un saludo

Respondido : 05/02/2021 10:41 am

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