Media Query Issues in my Technical Documentation Project

HTML-CSS
1

So far, I’ve attempted to add a media query. I have 2 in my CSS, but none of them have passed the tests. Is there a specific @media query I need to add? None of them seem to pass the tests. Help and feedback is much appreciated.

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!--Note: you need to fill in the headers with something in order for the tests to past. For now, keep them blank while you figure out what your "technical documentation" should be about-->
    <meta charset="UTF-8">
    <meta name="viewport" content="">
    <link rel="stylesheet" href="/.styles.css">
  </head>
  <main id="main-doc">
    <nav id="navbar">
      <header>CSS</header>
    <a class="nav-link" href="#Origin_Types">Origin Types</a>
    <br>
    <a class="nav-link" href="#Cascading_Types">Cascading Types</a>
    <br>
    <a class="nav-link" href="#Basic_Example">Basic Example</a>
    <br>
    <a class="nav-link" href="#Author_Styles">Author Styles</a>
    <br>
    <a class="nav-link" href="#CSS_Entities">CSS Entities</a>
    <br>
    <a class="nav-link" href="#Animations">Animations</a>
    <br>
    <a class="nav-link" href="#Reseting_Styles">Reseting Styles</a>
    <a class="nav-link" href="#Specifications">Specifications</a>
    </nav>
    <!--Note: remember to add appropriate corresponding id based on the text inside the id-->
    <section class="main-section" id="Origin_Types">
<header id="introduction">Origin Types</header>
<p></p>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ul>
    </section>
    <section class="main-section" id="Cascading_Types">
<header id="introduction">Cascading Types</header>
<p><code></code></p>
<p><code></code></p>
    </section>
    <section class="main-section" id="Basic_Example">
<header id="introduction">Basic Example</header>
<p><code></code></p>
<p><code></code></p>
    </section>
    <section class="main-section" id="Author_Styles">
<header id="introduction">Author Styles</header>
<p><code></code></p>
<p><code></code></p>
    </section>
    <section class="main-section" id="CSS_Entities">
      <header id="introduction">CSS Entities</header>
      <p><code></code></p>
      <p><code></code></p>
    </section>
    <section class="main-section" id="Animations">
      <header id="introduction">Animations</header>
        <p><code></code></p>
        <p><code></code></p>
    </section>
        <section class="main-section" id="Reseting_Styles">
      <header id="introduction">Reseting Styles</header>
        <p><code></code></p>
        <p><code></code></p>
    </section>
        <section class="main-section" id="Specifications">
      <header id="introduction">Specifications</header>
        <p><code></code></p>
        <p><code></code></p>
    </section>
    </main>
    <footer>

    </footer>
    </html>

/* file: styles.css */
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}
  @media (max-height: 800px){ 
    p {
    font-size: 10px;
      }
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Hey, could you please try to make your <p> elements render with green background?

p {
    background-color: green;
}

Did that work?

3

Put " scroll-behavior: smooth; " between html { } in your CSS code.

4

@Its_Whiz use of @media queries is correct and valid CSS.

@media (max-width: 800px) {  ...  } /* valid CSS */
@media (prefers-reduced-motion: no-preference) /* this is also valid media query */

No need for throwing W3C links at him :slight_smile:

1 Like
5

Instructions say

Be sure to add <link rel="stylesheet" href="styles.css">

But your link has this:

So I would fix the name to styles.css (no /.)

6

Thanks! This solved my issue! And the HTML passed all the tests. All I have to do now is style it.

1 Like
7

I was trying to lead him there :sweat_smile:

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.