Requêtes Media (media queries)!!!

Bonjour!

j'ai un problème au niveau du code CSS ci-dessous, mon problème se situe au niveau de la déclaration des requêtes médias ,

ma page est supposée etre comme ceci:

Disposition : dans la vue sur le bureau (992 pixels et plus), chacune des 3 sections doit occuper le même espace à l'écran. Au fur et à mesure que vous agrandissez ou rétrécissez la fenêtre du navigateur, chaque section doit devenir plus large ou plus étroite .
Mise en page : dans la vue tablette (entre 768 pixels et 991 pixels inclus), les 2 premières sections doivent se trouver dans la première rangée et être de taille égale. La 3ème section doit être dans la deuxième rangée et occuper toute la rangée à elle seule.
Disposition : dans la vue mobile (égale ou inférieure à 767 pixels), chaque section doit occuper toute la ligne.

 body{
    border: solid 1px black;
    text-align: center;
    margin: 0px;
    width: 100%;
   
}

 header{
    padding: 20px;
 }


footer{
   
      background: rgb(124, 146, 187);
      margin-top: 600px;
      padding-top: 32px;
      clear: both;

}
 
@media   (min-width: 992px) { 
  

     #id1{
       border: solid 3px black;
       background-color: lightslategray;
       width: 30%;
        margin: 1em;
        float: left;
     }

     #id2{
        border: solid 3px black;
        background-color: lightslategray;
        width: 30%;
        margin: 1em;
        float: left;
      }
    
     #id3{
       border: solid 3px black;
       background-color: lightslategray;
        width:30%;
        margin: 1em;
        float: right;
       }
   }

   @media (min-width: 768px) and (max-width: 991px){
     
    

   #id1{
      border: solid 3px black;
      background-color: lightslategray;
      width: 50%;
       margin: 1em;
       float: left;
    }

    #id2{
       border: solid 3px black;
       background-color: lightslategray;
       width: 50%;
       margin: 1em;
       float: left;
     }
   
    #id3{
      border: solid 3px black;
      background-color: lightslategray;
       width:100%;
       margin: 1em;
       float: left;

      }
   }

@media (max-width: 767px){
   
   
   #id1{
      border: solid 3px black;
      background-color: lightslategray;
      width: 100%;
       margin: 1em;      
        float: left;

   }

    #id2{
       border: solid 3px black;
       background-color: lightslategray;
       width: 100%;
       margin: 1em;       
       float: left;

    }
   
    #id3{
      border: solid 3px black;
      background-color: lightslategray;
       width:100%;
       margin: 1em;
       float: left;

      }
   }




     #id1 h1{
        border: solid 1px black;
        background-color: rgb(204, 141, 172);
        width: 150px;
        margin-top: 0px;
        margin-right: 0px;
        float: right;
     }

     #id2 h1{
        border: solid 1px black;
        background-color:crimson;
        width: 150px;
        margin-top: 0px;
        margin-right: 0px;
        float: right;
     }

     #id3 h1{
        border: solid 1px black;
        background-color: khaki;
        width: 150px;
        margin-top: 0px;
        margin-right: 0px;
        float: right;
     }


p{
   padding-top: 20px;
    padding-left: 3px;
    padding-right: 0px;
    text-align:start;
    font-size: 1em;
}

<!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>Mely</title>
    <link rel="stylesheet" href="Module2-solution.css">
</head>
<body >
    <header>
     <h1> Our Menu </h1>
    </header>
   
    <section >
      <div id="id1">
           <h1> Chicken</h1> 
           <p> lorem ipsum dolor dit amet, consecteur odipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore mogna aliqua. 
             Ut enim ad miminim vaniam, quis nostrud exercitation ullamaco laboris nisi ut aliquip ex eo,commodo consequat.
          </p>
    </div> 

    <div id="id2"> 
           <h1> Beef</h1>
           <p> lorem ipsum dolor dit amet, consecteur odipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore mogna aliqua. 
             Ut enim ad miminim vaniam, quis nostrud exercitation ullamaco laboris nisi ut aliquip ex eo,commodo consequat.
           </p>
    </div> 


   <div id="id3" > 
            <h1> Sushi</h1>
            <p> lorem ipsum dolor dit amet, consecteur odipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore mogna aliqua. 
              Ut enim ad miminim vaniam,quis nostrud exercitation ullamaco laboris nisi ut aliquip ex eo,commodo consequat.
            </p> 
    </div> 
    

    </section>

<footer></footer>

</body>
</html>

et voilà j’espère que vous pourrez m'aider à résoudre ce problème!!

cordialement,

-
Edité par Melymel 19 juin 2021 à 13:31:19

need your help!!

Requêtes Media (media queries)!!!

Supprimer

Modérer

Signaler le message aux modérateurs