Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema con Responsive Web Design

Estas en el tema de Problema con Responsive Web Design en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 13/03/2013, 20:32
 
Fecha de Ingreso: marzo-2013
Mensajes: 32
Antigüedad: 9 años, 9 meses
Puntos: 0
Problema con Responsive Web Design

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
  #2 (permalink)  
Antiguo 13/03/2013, 20:38
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 14 años, 3 meses
Puntos: 2236
Respuesta: Problema con Responsive Web Design

Pero, no es max-width en vex de min-width?
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 13/03/2013, 20:43
 
Fecha de Ingreso: marzo-2013
Mensajes: 32
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Problema con Responsive Web Design

Cita:
Iniciado por Triby Ver Mensaje
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
  #4 (permalink)  
Antiguo 13/03/2013, 22:56
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 14 años, 3 meses
Puntos: 2236
Respuesta: Problema con Responsive Web Design

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

Código CSS:
Ver original
  1. @media screen and (max-width: 1024px){
  2.     #menu {
  3.         /* Aquí los estilos */
  4.     }
  5. }
__________________
- León, Guanajuato
- GV-Foto
  #5 (permalink)  
Antiguo 14/03/2013, 02:25
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 12 años, 3 meses
Puntos: 14
Respuesta: Problema con Responsive Web Design

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!
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #6 (permalink)  
Antiguo 14/03/2013, 09:21
 
Fecha de Ingreso: marzo-2013
Mensajes: 32
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Problema con Responsive Web Design

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 !!
  #7 (permalink)  
Antiguo 16/03/2013, 10:39
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 19 años, 5 meses
Puntos: 406
Respuesta: Problema con Responsive Web Design

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

Espero haberte sido de ayuda.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #8 (permalink)  
Antiguo 24/03/2013, 16:47
 
Fecha de Ingreso: marzo-2013
Mensajes: 32
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Problema con Responsive Web Design

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

Saludos

Etiquetas: design, inconveniente, responsive
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 13:06.