[SOLUCIONADO] Problema con Responsive Web Design

[Federicoa]

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

[Triby]

Pero, no es max-width en vex de min-width?

[Federicoa]

Iniciado por Triby

Pero, no es max-width en vex de min-width?

Si cambio a max-width en mi resolucion se ve bien, pero en la "Desktop" se ve mal, osea queda invertido a la explicacion que di antes

[Triby]

Ahhh, pero será porque te falta especificar el medio que tiene esa resolución?

Código CSS:

@media screen and (max-width: 1024px){
    #menu {
        /* Aquí los estilos */
    }
}
 

[madman_18]

Hola!

Mira....si va a ser un proyecto que vas ha adaptar posiblemente a teléfonos, tablets y demás te aconsejo esta web http://www.responsinator.com/ para que vayas viendo el resultado.

En cuanto a tu problema...yo estoy adaptando una web y en mi resolución de pantalla es de 1920 x 1080 y aplico el diseño para dicha resolución. Luego lo que hice fue adaptar la resolución a 1024*768 porque mis diseños parto de esa resolución (considero que es prácticamente imposible adaptar al 100% los diseños a todas las resoluciones por la gran variedad que hay) y adaptar el css con un @media-queries hasta que se viese correctamente.

Así que te aconsejo partir de resoluciones más "corientes" como la de 1024x768 y ya a partir de ahí ir desarrollando tu web.

Ya nos vas comentando cómo te va.

Un saludo!

[Federicoa]

Probé todo lo que me dicen y no hay caso, no encuentro una forma de hacerlo funcionar. No me muestra los cambios en dichas resoluciones, es como si no estuviese escribiendo nada!

Ayuda por favor !!

[Bandit]

Hola Federicoa:
Revisa éste link: http://www.tutosytips.com/creando-un...media-queries/

Espero haberte sido de ayuda.

[Federicoa]

Hola, perdon por responder tan tarde, estuve ocupado en unos asuntos. Quería decir que si me sirvió, te agradezco mucho la ayuda !!

Saludos