Foros del Web » Creando para Internet » CSS »

Se ve mal en mobil

Estas en el tema de Se ve mal en mobil en el foro de CSS en Foros del Web. Hola, he estado creando una pagina y se ve practicamente igual en todos los navegadores, el problema viene al visitarla desde el mobil. Al hacer ...
  #1 (permalink)  
Antiguo 06/10/2012, 15:03
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Se ve mal en mobil

Hola, he estado creando una pagina y se ve practicamente igual en todos los navegadores, el problema viene al visitarla desde el mobil. Al hacer zoom se me van sobreponiendo los divs y se crea un caos que hace imposible navegar desde estos dispositivos. Es una pregunta teorica: Hay algun tipo de problema en general o peligros al usar ciertas propiedades como z-index por ejemplo o positio fixed?

O por el contrario hay que escribir algunas lineas de codigo para hacerlo compatible a mobil?

Tambien se los del responsive design pero yo creo que he usado buenas practicas, aunque quizas me equivoco...

Lo que me parece raro es que hay paginas super antiguas de 2007-2008 por ejemplo, que en cambio, se ven bien en dispotivos mobiles y no entiendo por que la mia no :S

A ver si alguien me puede echar una mano, gracias por adelantado!
  #2 (permalink)  
Antiguo 06/10/2012, 16:04
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 8 meses
Puntos: 1146
Respuesta: Se ve mal en mobil

mas que el z-index yo diría que un problema hasta cierto punto es el uso de position:fixed

tendrías que mostrar tu código y/o sitio para poder revisarlo y decirte cual es el problema de lo contrario no obtendrás ayuda útil.
  #3 (permalink)  
Antiguo 06/10/2012, 23:38
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Cita:
Iniciado por Ag666 Ver Mensaje
mas que el z-index yo diría que un problema hasta cierto punto es el uso de position:fixed

tendrías que mostrar tu código y/o sitio para poder revisarlo y decirte cual es el problema de lo contrario no obtendrás ayuda útil.
De acuerdo, mi pagina es una red social asi que te dejare un usuario para que no tengas que registrarte:

Usuario: c2am
Password: fdw

La pagina es http://www.vipefy.com

El problema esta al hacer zooms, la pagina de desencuadra mucho, a ver si ves el problema, muchas gracias por el interes!
  #4 (permalink)  
Antiguo 07/10/2012, 00:48
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 8 meses
Puntos: 1146
Respuesta: Se ve mal en mobil

pues tu problema es la utilización de position:fixed y no declarar un min-width para que se visualice correctamente, declarando este podrías solventar tu problema aunque puede haber mejores opciones.

deberías pensar en utilizar CSS Media Queries de o PHP para separar estilos en función a la resolución de la pantalla

sumado a esto valida tu código tienes una serie de errores algunos sin importancia y otros graves como por ejemplo
Código HTML:
Ver original
  1. <span class="numeral">1</style></p>
Código HTML:
Ver original
  1. </th>
  2.                                                     <form method="post" action="" >
  3.                                                     <tr class="unestado">
Código HTML:
Ver original
  1. </tr>
  2.                     </form>
  3.                    
  4.                                     <p class="none">91</p><th class="titleth">


entre muchos mas.

Nota: tu comentas problemas con dispositivos móviles pero aun viendo el sitio desde mi portátil encontré problemas, principalmente cuando pasas el puntero sobre la opción "votar"
  #5 (permalink)  
Antiguo 08/10/2012, 03:01
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Se ve mal en mobil

Cita:
Iniciado por Ag666 Ver Mensaje
pues tu problema es la utilización de position:fixed y no declarar un min-width para que se visualice correctamente, declarando este podrías solventar tu problema aunque puede haber mejores opciones.

deberías pensar en utilizar CSS Media Queries de o PHP para separar estilos en función a la resolución de la pantalla

sumado a esto valida tu código tienes una serie de errores algunos sin importancia y otros graves como por ejemplo
Código HTML:
Ver original
  1. <span class="numeral">1</style></p>
Código HTML:
Ver original
  1. </th>
  2.                                                     <form method="post" action="" >
  3.                                                     <tr class="unestado">
Código HTML:
Ver original
  1. </tr>
  2.                     </form>
  3.                    
  4.                                     <p class="none">91</p><th class="titleth">


entre muchos mas.

Nota: tu comentas problemas con dispositivos móviles pero aun viendo el sitio desde mi portátil encontré problemas, principalmente cuando pasas el puntero sobre la opción "votar"
Hola he estado validando el código y investigando sobre los media queries, de momento lo he implementado en la página de inicio que es la que menos errores tiene pero no me funciona, es decir: al hacer zoom en el input de iniciar sesión, en vez de hacer zoom y no modificar nada, el input de la contraseña se me pone abajo y el menú se me echa encima, queda muy mal, no sé si me habrás entendido pero si puedes pruebalo y verás a lo que me refiero, he usado esto:

Código PHP:
@media screen and (max-width480px) {
     .
menu{
positionabsolute;
left0%;
top0%;
width320px;
max-width320px;
height30px;
background-color#22B14C;
border#22B14C solid 2px;
z-index2;
}} 
Pero no me ha funcionado, ojalá puedas arrojar un poco de luz al asunto jeje, gracias

EDITO: Por ejemplo, viéndolo en el portátil, al hacer mucho zoom al menú, los elementos se empiezan a sobreponer y yo quiero que simplemente haga zoom al menú, no quiero que los elementos se superpongan para aparecer en la pantalla, si hago zoom en el medio del menú quiero que se vea lo que hay en el centro, no TODA la barra, ese es el problema.

Última edición por ananda; 08/10/2012 a las 03:07
  #6 (permalink)  
Antiguo 09/10/2012, 06:55
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Por favor, alguien puede ayudarme?
  #7 (permalink)  
Antiguo 09/10/2012, 08:21
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 16 años, 4 meses
Puntos: 19
Respuesta: Se ve mal en mobil

Ufffff... preguntas qué está mal? pq quizás deberías preguntar "Qué es lo que está bien?"

A ver... tienes un texto que es el bg de la web.
Esto, aparte de ser una chapuza, y conseguir que google no te indexe nada... es de por sí una fuente de problemas. Si el dispositivo con el que se mira la web tiene la pantalla pequeña, los distintos elementos se superpondrán encima del bg (y en tu caso del texto). Esto es así pq debe ser así.

Más cosas: Tu cuestionario está en posición absoluta a 215px de la izquierda.
Te importa más bien poco si la pantalla es de 800x600, de 1280x1024 o otra. Siempre va a estar a 215px de la izquierda.
Creo que ves el problema no? Trabajar con porcentajes o con una capa que te hiciera de contenedor te solucionaría problemas.

Otra cosa que se descuadra es el menú de arriba. Tampoco es raro.
El menú ocupa el 100% y los elementos de dentro se adaptan al 100%.
El problema te viene pq no marcas un min-width, entonces los elementos se mueven a tal de ocupar el 100% de la pantalla. No te aparecerá un scroll pq él siempre te ocupa el 100% (que es lo que le pides) descuadrando todo lo que aparezca a su paso.

En definitiva... dices que hay webs antiguas que se ven bien, pero es que no es un problema de antigüedad, es un problema de que no está bien pensada esta maquetación.

Yo, empezaría de cero otra vez.

Última edición por chrishxc; 09/10/2012 a las 10:32
  #8 (permalink)  
Antiguo 09/10/2012, 16:12
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Se ve mal en mobil

Cita:
Iniciado por chrishxc Ver Mensaje
Ufffff... preguntas qué está mal? pq quizás deberías preguntar "Qué es lo que está bien?"

A ver... tienes un texto que es el bg de la web.
Esto, aparte de ser una chapuza, y conseguir que google no te indexe nada... es de por sí una fuente de problemas. Si el dispositivo con el que se mira la web tiene la pantalla pequeña, los distintos elementos se superpondrán encima del bg (y en tu caso del texto). Esto es así pq debe ser así.

Más cosas: Tu cuestionario está en posición absoluta a 215px de la izquierda.
Te importa más bien poco si la pantalla es de 800x600, de 1280x1024 o otra. Siempre va a estar a 215px de la izquierda.
Creo que ves el problema no? Trabajar con porcentajes o con una capa que te hiciera de contenedor te solucionaría problemas.

Otra cosa que se descuadra es el menú de arriba. Tampoco es raro.
El menú ocupa el 100% y los elementos de dentro se adaptan al 100%.
El problema te viene pq no marcas un min-width, entonces los elementos se mueven a tal de ocupar el 100% de la pantalla. No te aparecerá un scroll pq él siempre te ocupa el 100% (que es lo que le pides) descuadrando todo lo que aparezca a su paso.

En definitiva... dices que hay webs antiguas que se ven bien, pero es que no es un problema de antigüedad, es un problema de que no está bien pensada esta maquetación.

Yo, empezaría de cero otra vez.
Hola, gracias por la ayuda, he aplicado muchos de los consejos que me has dado y ya he solucionado muchos problemas pero se me crean otros que no entiendo, por ejemplo, al menú le he dado un min-width: 980px; pero tengo un input flotando a la derecha, el error es que al hacer zoom ese input se me sobrepone al menú y siempre aparece en la pantalla, como podría hacer para evitar que eso sucediera? Muchas gracias por todo!

Última edición por ananda; 09/10/2012 a las 16:23
  #9 (permalink)  
Antiguo 10/10/2012, 23:01
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.744
Antigüedad: 13 años, 10 meses
Puntos: 444
Respuesta: Se ve mal en mobil

Lee sobre meta viewport.
__________________
Soy el autor de Heptagrama y tengo un servicio "todo incluido" de marketing web.
  #10 (permalink)  
Antiguo 14/10/2012, 14:03
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Se ve mal en mobil

Hola a todos, lo que he hecho ha sido hacer un responsive design de la página, y al final, modestamente, puedo decir que me ha quedado muy bien! La he probado en varios dispositivos y va genial, el único problema que tengo es que querría hacer un div con position fixed y la cosa es que tengo otros dos divs en la página que, entre los 3, suman el 100% del width. El problema es que al aumentar la pantalla con ctrl +, el div de la derecha finalmente se desplaza hacia abajo, supongo que porque no puede ocupar el 100% del width.

Si tengo los 3 divs en position: relative no hay ningún problema pero si quiero hacer uno fixed, empieza a ir mal. Podéis ver la página en el link que he puesto arriba en la sección "Novedades". Muchas gracias por adelantado!
__________________
Creador de Vipefy , una nueva red social con un punto de vista diferente de las relaciones sociales.

Etiquetas: divs, mobil
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:59.