0

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;
    }
}

1 respuesta 1

0

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"> 
1
  • como no me di cuenta, yo buscando los pixeles en el CSS, gracias, eso no me lo enseñaron
    – francisco
    Commented el 17 ago. 2020 a las 23:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.