CSS - Responsive

   
Vista:

Responsive

Publicado por Jose (3 intervenciones) el 04/07/2015 00:46:58
Buen día.

El problema que tengo es que tengo dos div y cuando llegue a una resolución de 650px en la pantalla me esconda uno y me muestre el otro, el me funciona en el navegador del pc pero cuando lo ensayo en mi celular que tiene una resolución de 360px no me funciona, que puede pasar, por acá les dejo el código, muchas gracias de antemano.

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
	<head>
		<meta charset="UFT-8">
		<link rel="stylesheet" href="styles/estilos.css">
	</head>
	<body>
		<div class="Parte-web">
			<div class="Saludo">
				Hola a todos
			</div>
 
			<div class="Despedida">
				Adioooos a todos !!!
			</div>
		</div>
	</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
*{
	margin:0;
	padding:0;
}
 
.Saludo{
	display:block;
}
.Despedida{
	display: none;
}
 
@media screen and (max-width:650px){
	.Saludo{
		display:none;
	}
	.Despedida{
		display: block;
	}
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Angel Komander

Responsive

Publicado por Angel Komander angel-krak@hotmail.com (54 intervenciones) el 04/07/2015 06:14:19
amigo yo lo veo bien, podrias pasar una captura de cmo se ve contigo? y si puedes sube tu codigo completo a Codepen ;)

http://codepen.io/AngelKrak/pen/VLQJPN
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-1
Comentar
Imágen de perfil de xve

Responsive

Publicado por xve (349 intervenciones) el 04/07/2015 10:38:05
Hola Jose, para que te funcione en un smartphone o tablet, tienes que añadir el meta viewport...

Añade en tu cabecera:
1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
y veras como te funciona!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Responsive

Publicado por Jose (3 intervenciones) el 04/07/2015 16:19:52
Buen dia.

Esa era la solución muchas gracias !!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Responsive

Publicado por Adrian (2 intervenciones) el 23/01/2016 11:08:12
Hola Jose,

¿Has pensado en usar un framework en vez de crear tu grid responsive desde cero?

Actualmente agiliza mucho el trabajo de un frontend y de hecho te lo suelen pedir en las entrevistas de trabajo.

Los frameworks css más usados son Bootstrap, Foundation y Materialize.

Si quieres iniciarte en materialize css(usa google material design), aquí tienes un tutorial de Materialize CSS.

Bootstrap ya está muy avanzado y hay mucha documentación, no obstante, ahora está por la versión más reciente Boostrap 4 alpha se llama, aquí te dejo un tutorial para bootstrap 4.

Un saludo, cualquier cosa avísame ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Responsive

Publicado por Adrian (2 intervenciones) el 27/10/2016 23:57:27
Me respondo a mí mismo, gracias a esto conseguí crear esta web de regalos muy buena. He dividido varias secciones, como esta de tazas frikis mediante el grid de bootstrap de col-m-3 + col-m-9, siempre queda bien con un sidebar al lado.

Por otro lado he usado el mismo template para llenar las secciones de comprar corbatas y cojines originales. Como siempre hago que la experiencia de usuario quede fluida y mejoro incluso el grid de bootstrap gracias a este tutorial.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar