Hola, este tema surgió por que tengo bastantes inconvenientes con el tema de responsive. Soy demasiado nuevo en el asunto y la tengo bastante complicada.
El problema es el siguiente, quiero adaptar mi web para todas las resoluciones, tengo un monitor de resolucion 1980x1024. Mi web se veia genial en este monitor, una vez que empece a aplicar CSS al Responsive, primero aplique CSS a lo siguiente:
Código:
@media (min-width: 940px) {
#menu {width: 23.5%;
margin-left: 30%;}
.foto {margin-top: -19.5%;}
hgroup {margin-left: 27%;}
.htmlporcentaje{margin-left:5%;
margin-top: 1.5%;
width: 50em;}
.cssporcentaje {margin-top: 1.5%;
margin-left:5%;
width: 50em;}
.queryporcentaje {margin-top: 1.5%;
margin-left:5%;
width: 17em;}
.phpporcentaje {margin-top: 1.4%;
margin-left:5%;
width: 7em;}
.wpporcentaje {margin-top: 1.4%;
margin-left:5%;
width: 30em;}
#ancla3{margin-top:8%;
}
}
Lo que logre con esto es que en resolucion "Desktop" se vea correctamente la pagina. Pero cuando cargo con MI RESOLUCION se desconfiguro todo!
Probe modificando otro @media:
Código:
@media (min-width:1024px){
#menu {width: 17.5%;
margin-left: auto;}
hgroup {margin-left: 23%}
.foto {margin-top: -14.7%;}
.htmlporcentaje{margin-left:3.4%;
margin-top: 0.8%;
width: 55em;}
.cssporcentaje {margin-top: 0.8%;
margin-left:3.4%;
width: 55em;}
.queryporcentaje {margin-top: 0.8%;
margin-left:3.4%;
width: 25em;}
.phpporcentaje {margin-top: 0.6%;
margin-left:3.4%;
width: 10em;}
.wpporcentaje {margin-top: 0.6%;
margin-left:3.4%;
width: 40em;}
#ancla3{margin-top:5%;
}
}
Pero no me hace ningun efecto ! , osea esas modificaciones no funcionan, probe con otras resoluciones menores pero tampoco puedo modificar nada, es como que me deja utilizar un solo @media y el resto no me deja modificar mas nada.
No se si se entiende el concepto, hice mucho barullo, pero bueno cualquier cosa preguntenme.
Ojala me puedan ayudar, se los agradezco. Saludos
