Avisos
Vaciar todo
Hola, buenos días,
Miren, estoy realizando una serie de modificaciones en la web www.mecuidomucho.com que usa la plantilla Gt02_blognews bajo Joomla! 2.5.14 y me ha surgido el siguiente problema.
La web está creciendo en contenido, por lo que el menú principal debe adaptarse. He creado una pestaña adicional llamada "Radio", a través de la cual se accede a un reproductor y a una sección de podcasts (captura_01.png). Lógicamente, para poder introducir esta nueva sección he tenido que reducir el espacio entre los botones del menú principal, usando CSS y dando un valor de padding menor al que tenía, expresado en píxeles -antes estaba en em- (capturas 02 y 03.png).
Modificando ese valor y haciendo las comprobaciones visuales en todos los navegadores principales, me encuentro con que Safari para iPhone -última versión- no coge el valor aceptado por los restantes navegadores (incluida la versión de Safari para Windows v. 5.1.7). He probado a seguir reduciendo el padding pero sigue existiendo el mismo problema.
¿Qué es lo que sucede?... ¿Debería reducir el tamaño de la tipografía?, ¿hay algún tipo de incompatibilidad que tenga que tener en cuenta?.
De antemano, muchas gracias.
Un saludo.
URL del sitio: Contenido solo visible a usuarios registrados
Respondido : 17/03/2014 12:39 pm
Hola,
El problema podría estar en que el navegador que estás utilizando en el iPhone tenga cacheados los estilos CSS de la página, de forma que no esté cargando las últimas modificaciones que has aplicado en ellos. Podrías probar a borrar el historial del navegador para comprobar si así los cambios se aplicar también en él.
Por otro lado veo que la plantilla que estás usando es de tipo responsive, lo que hace que su aspecto varíe en función del ancho de pantalla disponible en el navegador. De esta forma, es posible que los estilos CSS que se carguen sean distintos en función del ancho e incluso del dispositivo. Lo que veo es que para anchos reducidos el menú superior se tendría que cambiar por un desplegable. Tendríamos que ver una captura de pantalla de lo que se carga en el iPhone para tener el tema más claro.
Respondido : 17/03/2014 3:03 pm
Hola, buenas tardes,
Muchas gracias por responder tan rápido. De acuerdo, adjunto una captura de la web sacada de un iPhone 4s con iOS7.1.
Un saludo.
Respondido : 17/03/2014 4:20 pm
Hola,
He realizado pruebas y veo que este problema lo puedes reproducir también en un equipo de escritorio si se hace la ventana del navegador más estrecha.
Lo que ocurre es que al haber menos espacio no entran todos los elementos de menú del menú principal, desplazándose debajo del propio menú, de forma que estos elementos directamente ni se muestran. La vista de menú con desplegable se carga solo cuando el ancho de pantalla todavía es menor, por que te encuentras en un punto intermedio entre la vista de escritorio y la vista para pantalla estrechas en donde te surge el problema.
No hay una solución buena para este problema. Se podría estrechar todavía más el padding de los elementos de menú, pero estos quedaría muy pegados. También se podrían hacer cambios en los CSS para que los elementos de menú se muestren en 2 filas cuando no caben en 1, pero no quedaría muy bien a nivel de diseño.
La mejor opción pasaría porque movieras alguno de estos elementos de menú a un menú lateral, de forma que en el menú principal queden menos elementos y así se carguen todos para todos los anchos de pantalla posibles.
Respondido : 17/03/2014 5:40 pm
Muchas gracias por la respuesta. Me pongo con ello y te voy contando.
Un saludo.
Respondido : 17/03/2014 5:53 pm
Hola Pablo, buenos días:
En primer lugar, te pido disculpas por no haberte contestado antes. La solución a este problema pasó por reducir tanto el padding de los botones del menú -como tú decías-, como por la disminución del tipo de letra, con lo que conseguimos ganar espacio para el botón "Radio".
¡Conseguido! Muchas gracias por todo... 🙂
Un saludo.
Respondido : 30/05/2014 10:33 am
