Comunidad de diseño web y desarrollo en internet online

Problema con media query

Citar            
MensajeEscrito el 10 Jun 2013 11:49 pm
Hola,

Gracias de antemano por la ayuda, tengo un problema con un portal web que estoy maquetando.
He usado media query para mostrar diseños distintos de acuerdo al ancho de la página; en una PC o laptop se muestra correctamente, mientras voy achicando la pantalla esta va cambiando de diseño, en una tablet muestra el diseño del siguiente media screen:
@media screen and (max-width: 1000px)
{
.contenedor{
width:720px;
}
}

y el segundo, para un smartphone es:

@media screen and (max-width: 719px)
{
.contenedor{
width:100%;
}
}

He revisado el css varias veces y no encuentro el error o la inconsistencia.
Les dejo el link de la web:

http://www.bodai.pe/test/

Solo funciona el index.html para todas las media query

Por RINGO_thehunter

22 de clabLevel



 

chrome
Citar            
MensajeEscrito el 11 Jun 2013 12:05 am
He creado una prueba, he borrado todo el css menos el contenedor y casi todo en el html y sigue con el mismo inconveniente, les dejo el link
http://www.bodai.pe/prueba/

gracias

Por RINGO_thehunter

22 de clabLevel



 

chrome
Citar            
MensajeEscrito el 11 Jun 2013 12:51 pm
¿Y el error es...?

Por SinSemilla

Claber

336 de clabLevel



Genero:Masculino  

i am that i am...

firefox
Citar            
MensajeEscrito el 11 Jun 2013 06:47 pm
El error lo podrás ver si es que ingresas a ese link pero por un celular, si ingresas desde otro dispositivo lo ves bien.

No muestra el contenido del tercer media query, solo del segundo

Por RINGO_thehunter

22 de clabLevel



 

chrome
Citar            
MensajeEscrito el 11 Jun 2013 07:52 pm
Estas metiendo una query dentro de otra, te falta cerrar la llave de la query de 1000px...

Saludos!

Por SinSemilla

Claber

336 de clabLevel



Genero:Masculino  

i am that i am...

firefox
Citar            
MensajeEscrito el 11 Jun 2013 10:17 pm
Usa min en lugar de max o delimita tus media queries, porque si usas mas en las MQ que das de ejemplo siempre se tomara la mas grande en escalonado
ejemplo

Código :

pantalla1 = 900px

mediquerie1 max 1000px
mediaquerie2 max 719px

pantalla1 < mediquerie1 = true 
pantalla1 < mediquerie2 = false 


----

pantalla2 = 420px

mediquerie1 max 1000px
mediaquerie2 max 719px

pantalla2 < mediquerie1 = true 
pantalla2 < mediquerie2 = true



 



Te dejo las media queries mas usadas
http://nmsdvid.com/snippets/

Tambien te recomiendo que uses minimo 3 media queries
una para mobiles otra para tablets y una ultima para monitores,
Saludos.

Por k.'

41 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Jun 2013 09:36 pm
Hola, gracias!!!!
si era una "}" que me olvide colocar. Sabía que era una tontería el error... gracias!!!!!
Si son tres diseños, el primer media query, el que seria por default que es para pc,, el @media screen and (max-width: 1000px) que es para tablet y el @media screen and (max-width: 719px) que es para mobiles. Todos los controlo desde un div class llamado contenedor.

Por RINGO_thehunter

22 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.