Tell us what’s happening:
Hello everyone !
I’m struggling with the last part of this project : the media queries.
“Your Technical Documentation project should use at least one media query.”
I did 4 media queries and I can’t submit my code, it doesn’t work. Everything’s good but not this, even though I put media queries.
I put them at the end of the code, thinking it would work, but it won’t. It doesn’t even display the way it should, it works just fine in VSCode but not in the preview here.
To test it, I put another media queries that changed the color avec the header. It worked in the preview, but I still can’t submit my project.
I don’t understand.
Thanks in advance !
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Technical Documentation Page</title>
</head>
<body>
<nav id="navbar">
<header>Documentation HTML</header>
<ul>
<li>
<a class="nav-link" href="#Introduction">Introduction</a>
</li>
<li>
<a class="nav-link" href="#Balise_head">Balise head</a>
</li>
<li>
<a class="nav-link" href="#Balise_title">Balise title</a>
</li>
<li>
<a class="nav-link" href="#Balise_body">Balise body</a>
</li>
<li>
<a class="nav-link" href="#Balise_header">Balise header</a>
</li>
<li>
<a class="nav-link" href="#Balise_footer">Balise footer</a>
</li>
<li>
<a class="nav-link" href="#References">References</a>
</li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>
HTML signifie « HyperText Markup Language » qu'on peut traduire par «
langage de balises pour l'hypertexte ». Il est utilisé afin decréer et
de représenter le contenu d'une page web et sa structure.D'autres
technologies sont utilisées avec HTML pour décrire laprésentation
d'une page (<a
href="https://developer.mozilla.org/fr/docs/Web/CSS"
target="_blank"
>CSS</a
>) et/ou ses fonctionnalités interactives (<a
href="https://developer.mozilla.org/fr/docs/Web/JavaScript"
target="_blank"
>JavaScript</a
>)
</p>
<p>
L'« hypertexte » désigne les liens qui relient les pages web
entreelles, que ce soit au sein d'un même site web ou entre
différentssites web. Les liens sont un aspect fondamental du Web. Ce
sont euxqui forment cette « toile » (ce mot est traduit par web en
anglais).En téléchargeant du contenu sur l'Internet et en le reliant à
despages créées par d'autres personnes, vous devenez un
participantactif du World Wide Web.
</p>
<p>
Le langage HTML utilise des « balises » pour annoter du texte,
desimages et d'autres contenus afin de les afficher dans un
navigateurweb. Le balisage HTML comprend des « éléments » spéciaux
tels que :
</p>
<ul>
<li><code><head></code></li>
<li><code><title></code></li>
<li><code><body></code></li>
<li><code><header></code></li>
<li><code><footer></code></li>
<li>etc</li>
</ul>
<p>
En HTML, les balises sont insensibles à la casse et peuvent aussibien
être écrites en minuscules, en majuscules voire avec un mélangedes
deux.
</p>
</section>
<section class="main-section" id="Balise_head">
<header>Balise head</header>
<p>
L'élément HTML
<code> <head> </code>
fournit des informations générales (métadonnées) sur le document,
incluant son titre et des liens ou des définitions vers des scripts et
feuilles de style.
</p>
<p>
<strong>Note :</strong>L'élément
<code> <head> </code>contient principalement des données
destinées au traitement automatisé et pas nécessairement lisibles par
des humains. Pour afficher des informations lisibles pour les
utilisateurs dans des en-têtes ou titre, voir l'élément
header
</p>
<p>Exemple :</p>
<code>
<html><br />
 <head><br />
  <title>Titre du document</title><br />
 </head><br />
</html>
</code>
<p>
<strong>Note :</strong>La plupart des navigateurs conformes à HTML5
construisent automatiquement l'élément <code> <head> </code> si
les balises sont omises dans le balisage.
</p>
</section>
<section class="main-section" id="Balise_title">
<header>Balise title</header>
<p>
L'élément <code> <title> </code> définit le titre du document
(qui est affiché dans la barre de titre du navigateur ou dans l'onglet
de la page). Cet élément ne peut contenir que du texte, les balises
qu'il contiendrait seraient ignorées.
</p>
<p>
<strong>Note :</strong>L'élément <code> <title> </code> est
toujours utilisé au sein de l'élément <code> <head> </code>
</p>
<p>
Pour le référencement (SEO), le titre d'une page fait partie des
éléments principaux qui sont scannés lors de l'indexation d'une page.
C'est aussi le texte qui est affiché parmi les résultats du moteur de
recherche, de façon proéminente et donc visible par les utilisateurs
qui trouvent votre site grâce à un moteur de recherche. Ainsi il
vaudra mieux avoir des titres descriptifs plutôt que des titres trop
courts ou trop vagues
</p>
</section>
<section class="main-section" id="Balise_body">
<header>Balise body</header>
<p>
L'élément HTML <code> <body> </code> représente le contenu
principal du document HTML. Il ne peut y avoir qu'un élément
<code> <body> </code> par document.
</p>
<p>Exemple :</p>
<code>
<html><br />
 <head><br />
  <title>Titre du document</title><br />
 </head><br />
 <body><br />
  <h1>Exemple de titre</h1><br />
 </body><br />
</html>
</code>
</section>
<section class="main-section" id="Balise_header">
<header>Balise header</header>
<p>
L'élément HTML <code> <header> </code> représente du contenu
introductif, généralement un groupe de contenu introductif ou de
contenu aidant à la navigation. Il peut contenir des éléments de
titre, mais aussi d'autres éléments tels qu'un logo, un formulaire de
recherche, le nom d'auteur, etc.
</p>
<p>Exemple :</p>
<code>
<html><br />
 <head><br />
  <title>Titre du document</title><br />
 </head><br />
 <body><br />
  <header><br />
   <h1>Exemple de titre</h1><br />
  </header><br />
  <main><br />
   <p>Exemple de paragraphe</p><br />
  </main><br />
 </body><br />
</html>
</code>
</section>
<section class="main-section" id="Balise_footer">
<header>Balise footer</header>
<p>
L'élément HTML <code> <footer> </code> représente le pied de
page de la section ou de la racine de sectionnement la plus proche. Un
élément <code> <footer> </code> contient habituellement des
informations sur l'autrice ou l'auteur de la section, les données
relatives au droit d'auteur (copyright) ou les liens vers d'autres
documents en relation.
</p>
<p>Exemple :</p>
<code>
<html><br />
 <head><br />
  <title>Titre du document</title><br />
 </head><br />
 <body><br />
  <header><br />
   <h1>Exemple de titre</h1><br />
  </header><br />
  <main><br />
   <p>Exemple de paragraphe</p><br />
  </main><br />
  <footer><br />
   <p>Exemple de footer</p><br />
  </footer><br />
 </body><br />
</html>
</code>
</section>
<section class="main-section" id="References">
<header>References</header>
<p>
Toute la documentation sur cette page vient du site
<a href="https://developer.mozilla.org/fr/" target="_blank">MDN</a>
</p>
</section>
</main>
</body>
</html>
* {
box-sizing: border-box;
}
body {
display: grid;
grid-template-columns: 30% 70%;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 30px 30px 30px 0;
min-height: 100vh;
}
a {
text-decoration: none;
}
#navbar ul {
display: flex;
flex-direction: column;
gap: 20px;
padding: 0;
}
#navbar li {
list-style: none;
}
header {
font-size: 1.5rem;
color: red;
}
.main-section:not(:first-of-type) {
margin-top: 50px;
}
.main-section code {
background-color: rgba(128, 128, 128, 0.304);
}
/* -----MEDIA QUERIES */
body {
@media screen and (max-width: 950px) {
display: block;
margin: 30px 0;
}
}
#nav-bar ul {
@media screen and (max-width: 950px) {
flex-direction: row;
}
@media screen and (max-width: 750px) {
flex-wrap: wrap;
}
}
#main-doc {
@media screen and (max-width: 950px) {
margin: auto 30px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page