Hola, ¿alguien me podría ayudar con esto? No sé porqué aparece así. ¡Gracias! <code><!DOCTYPE html> <html lang="en"&g...

Mildred Zaragoza

Pregunta

student•

Hola, ¿alguien me podría ayudar con esto? No sé porqué aparece así.

¡Gracias!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mostly fluid</title>
    <link rel="stylesheet" href="../css/mostly-fluid.css">
</head>
<body>
    <main>
        <div class='c1'></div>
        <div class='c2'></div>
        <div class='c3'></div>
        <div class='c4'></div>
        <div class='c5'></div>
    </main>
</body>
</html>

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: azure;
}

html{
    font-size: 62.5%;
}

.container{
    display: flex;
    flex-wrap: wrap; /*para que el contenido pueda reposicionarse cuando vaya creciendo/disminuyendo el viweport*/

}

.c1, .c2, .c3, .c4, .c5{
    width: 100%;
    min-width: 150px;
    height: 150px;
}

.c1{
    background-color: #fde2e4;
}
.c2{
    background-color: #fad2e1;
}
.c3{
    background-color: #dfe7fd;
}
.c4{
    background-color: #cddafd;
}
.c5{
    background-color: #bee1e6;
}

@media (min-width: 600px){
    .c2, .c3, .c4{
        width: 50%;
    }
}

@media (min-width: 800px){
    .container{
        width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    .c1{
        width: 60%;
    }
    .c2{
        width: 40%;
    }
    .c3, .c4{
        width: 33%;
    }
    .c5{
        width: 34%;
    }
}

Kevin J. Zea Alvarado

student•

Hola, Mildred. 🙌

¿Cuál es el problema? ¿Qué es lo que estás buscando hacer?

Mildred Zaragoza

student•

Estoy intentando que al cambiar las dimensiones de la pantalla, los elementos se reacomoden y se vean como en el video de la clase. Aparentemente hice lo mismo, pero el resultado no es el mismo :(

Kevin J. Zea Alvarado

student•

Ya vi. Te hizo falta agregar la clase

container

<main>

<main class="container">
  <div class='c1'></div>
  <div class='c2'></div>
  <div class='c3'></div>
  <div class='c4'></div>
  <div class='c5'></div>
</main>

Mildred Zaragoza

student•

¡Mil gracias! Y, supuestamente, yo ya había revisado el código como 80 veces jaja

Kevin J. Zea Alvarado

student•

Jajaj no te preocupes. En realidad, que suceda esto es más común de lo que parece.

Sólo hay que tener paciencia y revisar el código paso por paso para ver qué es lo que no está funcionando.

¡Mucho éxito en tu camino, Mildred! 🙌💚

Hola, ¿alguien me podría ayudar con esto? No sé porqué aparece así. ¡Gracias! <code><!DOCTYPE html> <html lang="en"&g...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Hola, ¿alguien me podría ayudar con esto? No sé porqué aparece así. ¡Gracias! <code>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&g...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Hola, ¿alguien me podría ayudar con esto? No sé porqué aparece así. ¡Gracias! <code><!DOCTYPE html> <html lang="en"&g...