Media query avec display flex

Signaler
Messages postés
133
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
26 février 2021
-
Bonjour, j'ai voulu définir différentes tailles d'écran pour ma page web. J'ai un menu en display flex qui s'affiche en ligne et j'aimerais qu'il s'affiche en colonne lorsque la fenêtre a une petite largeur. Cependant, le menu reste en ligne.

Pourriez-vous m'indiquer où se trouve l'erreur s'il vous plaît?

<!DOCTYPE html>
<html>

	<head>
		<title>Website</title>		
  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  		<meta charset="utf-8">
  		<link rel="stylesheet" href="page1style.css" />
	</head>
  
  <body>
    <header>
      <div id="divnav">
        <nav>
            <a href="#home" class="active">Home</a>
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
            <a href="#search" id="search">
              <!--<form><input type="search"/>--><input type="image" alt="searchcloud" src="cloudsearch2.svg" id="searchcloud"/></form>
            </a>
        </nav>
      </div>

      <div id="divimg">
        <image src="islandCrop.svg" x="0" y="0" id="island" />
      </div>
    </header>
    
    <section>
      <p class='firstparagraph'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus mi odio, sed vulputate diam placerat et. Sed cursus euismod diam a viverra. Integer commodo fringilla massa non pretium.
      </p>

      <p>
       Integer ultrices tempor diam, ac vestibulum enim sagittis quis. In vulputate justo id molestie dictum. Aenean fringilla vel massa vel placerat. In mattis massa nec sem egestas condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus ante, blandit vel ultrices ut, faucibus a lorem. Morbi faucibus tempor mi, id efficitur elit dictum ut. 
      </p>

      <p>Aliquam bibendum nibh ex, sed sagittis dolor dignissim ut. Nulla facilisi. Phasellus euismod convallis libero vitae mattis. Cras mattis fringilla semper. Praesent fermentum, ex et dictum scelerisque, velit odio interdum urna, vitae tempus diam nulla quis nibh. Vestibulum vel ornare nibh. Maecenas eu dui metus. Donec luctus, turpis quis blandit faucibus, nisl arcu posuere dui, quis auctor augue nisl quis ligula. Nulla ligula lectus, commodo et suscipit quis, fermentum in nulla. Vivamus congue ipsum purus, id hendrerit nulla maximus quis. Sed non leo eros.
      </p><br/>      
    
      <form action="action.php"> <!-- wrapper flex grid -->

        <!-- TITLE -->
        <div id="formtitle">Form</div>

          <!-- 1 NAME -->
          <div id="formname">
            <label for="name">Nom</label>
            <input type="text" id="name" name="name" placeholder="nom" required/>
          </div>


          <!-- 2 AGE -->
          <div id="formage">
            <label for="age">Age</label>
            <select id="age" name="age">
            </select>
          </div>        


          <!-- 3 SEXE -->
          <div id="formsexe">
            <label for="sexe">Sexe</label>
              <optgroup id="sexe">          
                <option>
                  <input type="radio" id="sexe" name="sexe" value="H" checked/>
                  <label for="huey">H</label>
                </option>

                <option>
                  <input type="radio" id="sexe" name="sexe" value="F"/>
                  <label for="huey">F</label>
                </option>
              </optgroup>
          </div>


          <!-- 4 LANGUE -->
          <div id="formlangues">
            <label for="langues[]">Langue</label>
            <optgroup id="langues">
              <option>
                <input type="checkbox" id="fr" name="langues[]" value="Franças" checked>
                <label for="langues[]">Fr</label>
              </option>

              <option>
                <input type="checkbox" id="en" name="langues[]" value="English">
                <label for="langues[]">En</label>
              </option>

              <option>
                <input type="checkbox" id="jp" name="langues[]" value="Japonais">
                <label for="langues[]">日本語</label>
              </option>         
            </optgroup>
          </div>


          <!-- 5 LOISIRS -->
          <div id="formloisirs">
            <label id="loisirs">Loisirs</label>
              <select id="loisirs" name="loisirs" multiple>            
                <option value="programmation">Programmation</option>
                <option value= "musique">Musique</option>
                <option value="cinema">Cinéma</option>
                <option value="nuages">Nuages</option>            
              </select>
          </div>



          <!-- 6 COMMENTAIRE -->
          <div id="formcommentaire">
            <label for="commentaire"><!--commentaire--></label>
            <textarea id="commentaire" name="commentaire" placeholder="your comment here"></textarea>
          </div>

          <!-- BOUTON -->
          <div id="formenvoyer">
            <input type="submit" value="Envoyer"/>
          </div>
      </form>
    </section>

    <footer>
      <p>
      Copyright 1789-2021 by the Sky. All Clouds Reserved. <img alt="little cloud" src="littlecloud.svg" id="littlecloud" height="20px" width="20px"/>
      </p>
    </footer>

    <!-- <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script> -->
    <script src="page1script.js"></script>
  </body>

</html>


/* ---------------- MEDIA QUERIES ---------------- */


/* pour les écrans de taille moyenne type tablette */
/* marges supprimées */
@media screen and (min-width: 780px) and (max-width: 979px){
	*{
		color: green;
		margin: 0;
		padding: 0;
	}
}


/* pour les écrans de petite taille type téléphone */
/* menu vertical */
@media screen and (min-width: 0px) and (max-width: 779px){
	*{
		color: orange;
	}

    nav{
	display: flex;
	flex-direction: row;	
	}
}


/* ---------------- BODY ---------------- */

body{
	/*border: 4px solid #8dcba5;*/
	margin: 0px;
	background-color: white;
	color: rgba(70,147,188,1);
	font-family: sans-serif;
	/*background-image: url("clouds.svg");
	background-repeat: repeat;*/

}

body section{
	margin: 120px;
}



/* ---------------- HEADER ---------------- */

header{
	/*border: 4px solid orange;	*/
	width: 100%;
	/* centre au milieu */
	margin-left: auto;
    margin-right: auto;

    margin-bottom: 0; /* ??? */

}

#divnav{
	background-color: rgba(70,147,188,1);
	border-bottom: 5px solid white;
	border-top: 5px solid white;
}


nav{
	/* border: 4px solid red; */
	display: flex;
	justify-content: center;
	height: 75px;
	background-color: rgba(70,147,188,1);
	
	margin-left: 15%;
	margin-right: 15%;
	
}


nav a{	
	font-size: 1.3em;
	color: white;
	width: 25%;
	text-align: center;
	text-transform: uppercase;
	padding-top: 25px;
	transition: 1s;

}


nav a:hover, #search:hover{
	padding-bottom: 15px;
	/*background-color: #8bcdf0;*/
	background-color: #23719a;
	transition: 1s;	
}


a{
	color: #d1daf0;
	text-decoration: none;
}

/* bouton de recherche */
nav input{
	display: inline;
	border: white;
	border-radius: 3px;
	height: 1.5em;
	width: 110px;
}

/*nav input[type=search] {
  border-radius: 4px;
  border-color: orange;
  height: 25px;
  position: relative;
  bottom: 8px;
}*/


/*bouton*/
#searchcloud{
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	/*bottom: 2px;
	left: 10px;*/
	/*height: 30px;*/
	/*width: 35px;*/
}


/*#search:hover{
	background-color: rgba(70,147,188,1);
}*/


/* ---------------- IMG ---------------- */
#divimg{
	
	background-color: #8bcdf0;
}

#island{
	/* svg -> mettre un display block d'abord */
	display: block;
	margin-left: auto;
	margin-right: auto;    
    width: 70%;
}








/* ---------------- SECTION ---------------- */
section{
	/*border: 4px solid pink;*/
	font-size: 1.3em;
	margin: 0; /* ??? */	

}

section p{
	text-align: justify;
}

section p::first-letter{
	font-size: 2em;
	color: #337fa0;
}







/* WRAPPER GRID */
section form{
	text-align: center;	
	padding-left: 2px;
	padding-right: 2px;
	color: white;
  	border-radius: 3px;
	/*background: linear-gradient(0.75turn, #89ceec, #4693bc);*/
	/*background-image: url("clouds.svg");*/
	/*background-repeat: repeat;*/	
}


form{
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 20% 20% 20% 20% 20%;	
	width: 70%;
	max-width: 700px;
	margin: auto;
	/*background: linear-gradient(0.75turn, #78c045, #e85524);*/
	text-transform: uppercase;	
}

form label{
	letter-spacing: 0.5em;
}

form div{
	padding: 30px;
	border: 3px solid white;
}




/* titre formulaire */
#formtitle{
	color: white;	
	text-transform: uppercase;
	letter-spacing: 1.5em;
	font-size: 2em;

	background-color: #cfe7f0;
	grid-column: 1 / 5;
	grid-row: 1 / 2;	
	border-bottom: 3px solid white;
	height: 50px;

	padding: 0 auto;

}


/* nom */
#formname{
	background-color: #e85524;
	grid-column: 1 / 3;
	grid-row: 2 / 3;
	transition: 1s;
}

#formname:hover{
	background-color: #b6370d;
	transition: 1s;
}
input[type=text] {
	display:block;
  	border-radius: 1px;
  	border: none;
  	/*border-color: #aadaf3;*/
  	width: 150px;
  	height: 20px;
  	margin-top: 20px;
  	margin-left: auto;
  	margin-right: auto;
}

/* age */
#formage{
	/*background-color: red;*/
	grid-column: 3 / 4;
	grid-row: 2 / 3;
	background-color: #375262;
	transition: 1s;
}

#formage:hover{
	/*background-color: red;*/
	grid-column: 3 / 4;
	grid-row: 2 / 3;
	background-color: #627e8e;
	transition: 1s;
}

#age{
	display: block;
	margin: auto;
	margin-top: 15px;
}


/* sexe */
#formsexe
{
	background-color: #94c63d;
	grid-column: 4 / 5;
	grid-row: 2 / 3;
	transition: 1s;
}

#formsexe:hover{
	background-color: #75ad14;
	transition: 1s;
}

/* langues */
#formlangues
{
	background-color: #116835;
	grid-column: 3 / 5;
	grid-row: 3 / 4;
	transition: 1s;
}
#formlangues:hover
{
	background-color: #4e9069;
	transition: 1s;
}
#langues{
	margin-top: 30px;
	margin-bottom: 30px;
}
#langues option{
	display: inline;	
	letter-spacing: 0em;
}
/* checkbox et leurs labels respectifs */
input[type=checkbox] + label {
	display:inline-block;
  	color: #94c63d;  	
  	font-weight: lighter;
  	text-transform: uppercase;
  	letter-spacing: 0em;
}


/* loisirs */
#formloisirs
{
	background-color: #FFC300 ;
	grid-column: 3 / 5;
	grid-row: 4 / 5;
	height: 100px;
	transition: 1s;
}
#formloisirs:hover
{
	background-color: #f5cd4c;
	transition: 1s;
}
#formloisirs select{
	display: block;
	margin: auto;
	margin-top: 20px;
	height: 40px;
	border: none;
}

/* commentaire */
#formcommentaire
{
	background-color: #5ed5ff;
	grid-column: 1 / 3;
	grid-row: 3 / 5;
	transition: 1s;
	padding: 10px;
}
#formcommentaire:hover{
	background-color: #4ec6f1;
	transition: 1s;
}
section textarea{
	display:inline-block;
	
	border-style: none;
  	border-radius: 4px;

  	width: 100%;
  	height: 100%;
  	background-color: #5ed5ff;
  	padding: 0;
  	margin: 0;
  	font-size: 1.5em;
}

section textarea:focus{
    outline: none;
	box-shadow:none !important;
	border:none;
}


/* bouton */
#formenvoyer
{
	background-color: #cfe7f0;
	grid-column: 1 / 5;
	grid-row: 5 / 6;
}
input[type=submit]{
	background-color: white;
	color: #0d5071;
	margin: 30px;
	border: none;
	height:70px;
	width: 70px;
	border-radius: 3px;
	transition: 1s;
}

input[type=submit]:hover{
	background-color: #fae1f4;
	color: #750d5a;
	transition: 1s;
}
/* END GRID END */










/* ---------------- FOOTER ---------------- */
footer{
	color: white;
	text-align: center;
	background-color: #8bcdf0;
	height: 60px;
	padding: 40px;
	border-bottom: 5px solid white;
}

#littlecloud{
	position: relative;
	top: 4px;
}




Configuration: Windows / Firefox 85.0