AnswerBun.com

No me funciona el @media

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

One Answer

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

Add your own answers!

Related Questions

Consulta SQL Server según condición y fecha

1  Asked on December 18, 2020 by fernando-aguayo

       

NODEJS + EXPRESS – Al usar REQUIRE siempre obtengo “undefined”

2  Asked on December 17, 2020 by manzarbeitia

       

Buscar y copiar valores de una celda

0  Asked on December 16, 2020 by guif-if

 

Volcar datos de una tabla de un base de datos a otra base de datos

0  Asked on December 15, 2020 by roberto-alonso-pepn-sanchez

   

¿Cómo representar con ggplot esta tabla de datos? R

0  Asked on December 15, 2020 by maria-jos-silva

 

Descargar archivo Angular

1  Asked on December 15, 2020 by jos-luis-snchez

     

Alertas con react-alert no se muestran

0  Asked on December 14, 2020 by soyunewok

     

Usar useDispatch en una función

1  Asked on December 14, 2020 by ignacio-garca

         

Event Listeners no funcionan, ¿por qué?

1  Asked on December 14, 2020 by david-torres

   

Agrupar registros según fecha

1  Asked on December 13, 2020 by jose-huerta

 

Dar espacio predeterminado para mostrar texto en Java

1  Asked on December 13, 2020 by heckdan

 

Probema con discord developper

1  Asked on December 12, 2020 by pacheco

 

RequestContext se ejecuta dos veces

1  Asked on December 12, 2020 by gibran-alexis-moreno-zuiga

       

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir