Partage
  • Partager sur Facebook
  • Partager sur Twitter

aide media querries

regles que ne s'applique pas

LetTheBeatControlYourBody
    27 octobre 2021 à 12:06:14

    bonjour, 

    j'essaye de faire une mise en page mobil first avec un point de rupture a 800px. 

    j'ai fait un media querries avec une regle qui redispose ma grille mais malheureusement celle ci ne s'applique pas. 

    pourriez vous m'aidez à corriger mon code ? 

    merci. 

    <!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>Mise en page</title>
        <link rel="stylesheet" href="mise_en_page.css">
    </head>
    <body>
        <div class="container">
            <header>HEADER</header>
            <div class="content">CONTENT</div>
            <aside>ASIDE</aside>
            <footer>FOOTER</footer>
        </div>
    </body>
</html>
    body {
    margin: 0;
    padding: 0;
}

.container {
    display: grid;
    color: white;
    height: 100vh;
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 3fr 1fr 1fr;
    grid-template-areas: "header" "conten" "aside" "footer";
}


header {
    background-color: green;
    grid-area: header;
}

.content {
    background-color: brown ;
    grid-area: conten;
}

aside{
    background-color: orange;
    grid-area: aside;
}

footer {
    background-color: blue;
    grid-area: footer;
}

@media screen and (min-width: 801px) {
    .container {
        grid-template-columns: 2fr 1fr;
        grid-template-areas: "header" "header" "conten aside" "footer footer";
    }
}



    • Partager sur Facebook
    • Partager sur Twitter

    IIIIlllIIII

    Lord Morpheus
    • HTML / CSS
      27 octobre 2021 à 12:53:52

      Bonjour,

      Tout dépend du rendu recherché, mais chez moi ça fonctionne. A partir de 800px de large, j'ai bien ton design qui se modifie.

      Es ce qu'en remplaçant min-width par max-width dans ton media queries tu obtiens le rendu recherché?

      • Partager sur Facebook
      • Partager sur Twitter

      Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

      aide media querries

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur ●
      • Markdown