Stack Overflow en español Asked by francisco on August 29, 2020
Estoy en un curso de CSS responsive, si soy novato, pero cuando estaba haciendo los porcentajes y las dimensiones note que la pagina se reducia de tamaño como si le quitaran el zoom a una imagen en vez de encojer los cuadros respectivos en la seccion de articulos. Al momento de poner inspeccionar elemento, al encojer los laterales de la pagina, esta se encoje en su totalidad, he revisado el codigo como 5 veces y todavia no encuentro la falla, debe ser una falla de logica. Ademas como tambien el @Media no me funcionaba desde el principio, al momento de encojer a esa anchura, no pasa nada con el color de fondo, se mantiene igual sabiendo que deberian cambiar a rojo. Si es que me pueden ayudar con la logica del problema y explicarme con codigo simple que pasa , se agradece de antemano. Adjuntare el HTML y el CSS del problema completo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Aprendiendo Responsive con Victor Robles</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="container">
<header>
<h1>Aprendiendo Responsive</h1>
</header>
<section id="content">
<aside>
<h2>Barra lateral</h2>
</aside>
<section id="articles">
<article>
<h2>Articulo 1</h2>
</article>
<article>
<h2>Articulo 2</h2>
</article>
<article>
<h2>Articulo 3</h2>
</article>
<article>
<h2>Articulo 4</h2>
</article>
<article>
<h2>Articulo 5</h2>
</article>
<article>
<h2>Articulo 6</h2>
</article>
</section>
<div class="clearfix"></div>
</section>
<footer>
Pie de pagina
</footer>
</div>
</body>
</html>
y adjunto el codigo de CSS , si es que me pueden ayudar porfavor
*{
margin: 0px;
padding: 0px;
}
.clearfix{
float: none;
clear: both;
}
#container{
width: 70%;
background-color: red;
margin: 0px auto;
font-family: Arial, Helvetica, sans-serif;
margin-top: 40px;
margin-bottom: 40px;
}
header{
width: 100%;
background-color: lightblue;
columns: #333333;
height: 150px;
line-height: 150px;
text-align: center;
}
aside{
width: 25%;
background-color: #ccc;
float: left;
min-height: 700px;
text-align: center;
line-height: 700px;
}
#articles{
width: 75%;
float: left;
min-height: 700px;
background-color: lemonchiffon;
}
#articles article{
width: 25%;
height: 150px;
background-color: green;
color: white;
line-height: 150px;
text-align: center;
border: 2px solid white;
float: left;
margin: 15px;
}
@media (max-width:888px){
#articles article{
width: 40%;
background-color: red;
}
}
Debes agregar la etiqueta meta viewport luego de la etiqueta Title en tu HTML
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
Correct answer by Elboy on August 29, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP