Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Problema con @media

CSS - Problema con @media

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Problema con @media

Publicado por Alejandro (1 intervención) el 12/09/2017 23:00:26
Muy buenas gente.

Os cuento, tengo un pequeño problema con una galería responsive y es que no se como hacer para que cuando la pantalla sea menos de 480px de ancho se muestren dos columnas y cuando sea superior a esa resolución se muestren 4

La etiqueta meta es esta
1
<meta name="viewport" content="width=device-width">

y dejo el pedazo de codigo css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media screen and (max-width: 480px) {
  .content .cards {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
 
@media screen and (min-width: 481px) {
  .content .cards {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}
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 ScriptShow
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Problema con @media

Publicado por ScriptShow (125 intervenciones) el 16/09/2017 13:11:14
La idea base para modificar y/o adaptar sería:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
*  {
margin: 0;
padding: 0;
box-sizing: border-box;
}
 
.content {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
 
@media (max-width: 480px) {
.content {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
</style>
</head>
<body>
<div class="content">
<h2>Columna-1</h2>
<h2>Columna-2</h2>
<h2>Columna-3</h2>
<h2>Columna-4</h2>
</div>
</body>
</html>

Espero sea útil.

Un saludo
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