Configurar la página web para iphone  

Hola

Por defecto el Pack Helena WordPress es 100% responsive y se visualiza correctamente en dispositivos móviles, iPhone incluidos.

Esto quiere decir que se visualiza correctamente en cualquier dispositivo. Pero si realizas modificaciones que afecten al código que permite que tenga el comportamiento de layout fluido entonces comenzará a tener comportamientos no deseados en determinados dispositivos.

Lo mismo si empiezas después a usar plugins que NO sean "responsive" pues estos provocarán que luego los contenidos no se adapten de forma automática al dispositivo donde se visualice la web.

La recomendación en estos casos es usar siempre plugins que sean "responsive".

Facilítanos capturas concretas de elementos de la web que no se visualicen correctamente por favor.

Saludos

Te paso algunas imágenes.

Hola

Veo que pasas las imágenes de la web pero no explicas que cambios has realizado.

Como te comenté, los cambios aplicados, si son realizados de forma incorrecta o utilizando plugins que no tengan un buen comportamiento/o ningún comportamiento responsive, afectarán directamente a la vista de la web desde dispositivos móviles.

Si nos explicas por favor que cambios has incorporado en elementos que en la demo de pack Helena se ven correctamente y en la tuya no, podremos centrarnos en ver posibles causas.

- Demo oficial: http://demos-wordpress.webempresa.com/helena/
- Vista en un iPhone y otros dispositivos: http://www.responsinator.com/?url=http%3A%2F%2Fdemos-wordpress.webempresa.com%2Fhelena%2F

Saludos

Hola de nuevo,
He puesto los iconos en el menú superior (en un móvil normal aparecen tipo responsive, pero en los ipad no). He añadido un menú de contacto en un widget dentro de las páginas (a la izquierda), pero en los ipad la parte de texto aparece desconfigurada; y he añadido en el pie de página el widget de Twitter (en los ipad aparece desconfigurado en el resto de móviles no).

Hola

Centrémonos en los iconos de redes sociales de la cabecera, para ir avanzando en temas que planteas, que son varios.

¿Puedes adjuntar una captura de pantalla de como los ves tu en tu móvil iPhone para que podamos cotejarlo con lo que vemos nosotros?

¿Desde donde insertas esos iconos de redes sociales en el dashboard, puedes ilustrarlo y con que plugin o código exacto?

La idea es ir desgranando la forma en que añades esos contenidos que acaban afectando al comportamiento responsive que tiene el Pack Helena.

Gracias

Los iconos los he insertado a través del menú añadiendo este código en la Etiqueta de Navegación (te pongo por ejemplo que el que está en el botón de Inicio, pero los demás son iguales):

Inicio

El cliente quería los iconos de esa manera y ha sido la única forma.

En mi android se ven como te lo incluyo en la imagen llamada android-1.png. Y en el ipad en la que se llama ipad-1.png.

Hola.
Para añadir los iconos de las redes si quieres que se representen bien en todos los dispositivos, te aconsejo que los añadas con un modulo que lleve ya la función responsive:
Social Comments and Sharing for Joomla

Para añadirlos como tu indicas tendrías que crear una clase para esas imágenes o iconos y después con css ir inadaptados a los distintos dispositivos.

Una vez tengas lo de los iconos solucionado vamos viendo las demas opciones que querías modificar 😉

Un saludo

Hola Pepe,
Creo que no me he explicado bien. Yo no tengo ningún problema con los iconos de redes sociales (me da un poco igual que aparezcan en este caso o no).
El problema es con los iconos del menú y con el menú de cabecera como tal, es decir, INICIO, NOSOTROS, SERVICIOS, CONTACTO, ...
Esos son los que en un android sí se pliegan y se hace responsive la página pero en un ipad no.
Salludos.

Hola

Prueba agregar los siguientes estilos CSS :

@media (max-width:1200px) and (min-width:780px){
	.layout-mode-responsive .gf-menu.l1 > li > .item{
		font-size:12px;
		padding:5px;
	}

	.gf-menu{
		float:right;
	}	
}

@media (max-width:958px) and (min-width:768px){
	.layout-mode-responsive .gf-menu.l1 > li > .item{
		font-size:10px;
		text-transform:none;
	}
}

Puedes agregarlo al final del archivo :
/wp-content/themes/helena_wp/style.css

Este código CSS trabaja para ciertas resoluciones y te cambia un poco la apariencia de las opciones de menú para que se vean correctamente en dispositivos como las tables.

Para ver los cambios tienes que refrescar tu navegador o limpiar la cache

Saludos.