Avisos
Vaciar todo

Plantilla encelado css móviles apaisado  

 
Aurelio
 Aurelio
Reputable Member

Buenas, en otro post ya cerrado me dijo pepe las dimensiones para un huawei p7 cuál era la dimensión en píxeles en posición vertical del teléfono móvil, pero lo que no sé cuál sería la dimensión cuando pones el móvil en posición apaisado y no encuentro información. ¿Me podríais decir que valor hay que poner para hacer el @media screen (max-width:¿?)

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 19/05/2016 6:53 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Te revieres a este modelo ? :
http://mobiledevicesize.com/compare/#428;1

Allí figura las dimensiones en el campo : resolucion screen

Sin embargo ten en cuenta que tu sitio debe ser adaptable, no configurar para una resolución específica, puedes tomar como guia lo que se usa en las plantillas gantry , revisa el siguiente link , la sección de Responsive Grid Info
http://docs.gantry.org/gantry4/advanced/responsive-grid-system

Si no es esto a lo que te refieres detalla un poco más tu consulta

ResponderCitar
Respondido : 19/05/2016 8:16 pm

Aurelio
 Aurelio
Reputable Member

Buenos días, si me refiero a eso, veo que pone de profundidad 441 px, pero lo que no sé es interpretar si me lo decis vosotros porque no consigo saber esa respuesta es que si pone de profundidad 441px, realmente cuando haces un querie para adaptar la plantilla, si yo quiero diseñar y adaptar cuando el móvil lo tienes de forma vertical, qué debo poner ¿¿¿¿@media screen (max-width:441px)???? y cuando pongo el teléfono en horizontal, entiéndase apaisado si se entiende mejor así ¿¿¿¿@media screen (max-width:441px)???? Es que como no estoy seguro, cuando busco dimensiones de móviles googleando cuando leo las características no sé interpretar la dimensión que debo tomar.
Por otro lado no es que quiera adaptarlo para este móvil sólo, es el que yo tengo y voy probando si me funciona y se adapta correctamente.

Si me lo podéis aclarar perfecto.

Por otro lado en la página web que estoy haciendo, en el enlace de quíenes somos, justo debajo de la imagen se me queda el texto muy pegado a la foto y he probado haciendo dos divs para tener dos capas y poder moverlo ya que, dejándolo todo escrito desde el editor me toma en código html como

y no puedo separar una cosa de la otra, a ver si en este apartado me podéis echar una mano.

ResponderCitar
Respondido : 21/05/2016 9:55 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Aurelio.
Prueba con esa resolución que indicas ' @media screen (max-width:441px) ', el valor del pixel puedes variarlo hasta comprobar que se adapte bien.

justo debajo de la imagen se me queda el texto muy pegado a la foto
Esto es lo que yo veo y no veo que nada de lo que comentas, puedes adjuntarnos una captura con lo que quieres modificar.

Un saludo

ResponderCitar
Respondido : 21/05/2016 10:25 am

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

Aurelio
 Aurelio
Reputable Member

Una pregunta Pepe, la parte vertical lo tengo ya funcionando bien al menos en mi móvil se ve correcto ya. Me queda hacerlo de forma apaisada para que se vea correcto en la versión móvil de la página quienes somos. En firebug hay una opción para cambiar los tamaños de visualización, pero... me ha parecido ver que cuando cambio la dimensión no se corresponde con el móvil o igual no lo estoy entendiendo bien la parte de visualización en firebug para que corresponda exactamente igual el visionado en el móvil. ¿Esto me lo podéis aclarar por favor para no tener que estar cada dos por tres borrando la caché del navegador de mi móvil y comprobarlo? Me ahorraría mucho tiempo y esfuerzo. También te pediría en tu post que la foto que aparece como contestación a mi pregunta la puedas ocultar por favor, te lo agradecería infinitamente.

ResponderCitar
Respondido : 21/05/2016 11:50 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Aurelio.
¿Esto me lo podéis aclarar por favor para no tener que estar cada dos por tres borrando la caché del navegador de mi móvil y comprobarlo?

Puedes comprobar como se vería en versión móvil desde esta pagina:
screemfly

Solo tienes que añadir la url y elegir en el menú superior el modelo que quieres que se represente.

Nota: aquí mandáis vosotros, eres libre pedir lo que quieres que se publique o no

Un saludo

ResponderCitar
Respondido : 21/05/2016 12:08 pm

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

Aurelio
 Aurelio
Reputable Member

Gracias Pepe por tu respuesta, está muy bien el sitio pero, no encuentro como poner la opción de apaisado o quizás qué resolución debería poner para dejar la pantalla apaisada, quiero decir que mi móvil que es desde donde lo veía es un p7 de huawei 5" 1080x1920 pixel según veo por internet.

Ahora mi pregunta un poco "perogrullo" porque es donde yo dudo... en la página que me has pasado para comprobar cómo se vería en el móvil debería coger la resolución 1080*1920pixel profundidad 24 bits, cómo lo pongo para que me de la visión horizontal y de esta manera pueda ver cómo queda?

Espero haberme explicado porque la verdad es que esto no lo tengo nada claro y siempre me lío.

También decir que me estoy dando cuenta al jugar con los max-width y min-width si lo pongo para un tipo de móvil ya se desvirtúa para otro, ahora mismo lo tengo configurado para que en los iphone 6 plus se vea correctamente, pero si pongo para un samsung galaxy s3 por ejemplo y trabajar con sus dimensiones por algún lado falla, no sé cómo se debe hacer correctamente para que se vea bien en los diferentes móviles, me podéis ayudar con esto por favor porque no sé cómo hacerlo correcto

ResponderCitar
Respondido : 22/05/2016 8:45 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Aurelio.
La plantilla encelado de nuestros pack's ya viene programada para que sea responsive y se visualice en diversos dispositivos por lo que nos es necesario modificar tantas cosas, Cuanto mas modifiques mas problemas te puedes encontrar en otros sitios, creo que estás complicándote demasiado.

Estas son las medidas estándar que se utilizan:

/ Móviles en horizontal o tablets en vertical
@media (min-width: 768px) { }
------------------------------------------------------------------------- /
/ Tablets en horizonal y escritorios normales
@media (min-width: 1024px) { }

------------------------------------------------------------------------- */
/ Escritorios muy anchos
@media (min-width: 1200px) { }

Un saludo

ResponderCitar
Respondido : 22/05/2016 10:36 am

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

Aurelio
 Aurelio
Reputable Member

Gracias Pepe, ya lo tenía solucionado, no es complicarme la vida, es que quizás la visión en el móvil de ciertas cosas no me convencían, pero bueno ya he entendido como van los tamaños responsives. Muchas gracias podéis cerrar el tema.

Un saludo.

ResponderCitar
Respondido : 22/05/2016 2:03 pm