Project tester not recognizing my media queries

HTML-CSS
1

Hello,

I am working on the Technical Documentation Page project, and only need the final user story to complete the project. Here is the user story:

  1. Your technical documentation should use at least one media query

I included multiple media queries in my styles.css file. Here below are the ones I made:

@media only screen and (min-width: 950px) {
  html {
    font-size: 18px;
  }
  #navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
  }
  #navbar header h1 {
    font-size: 2rem;
  }
  #navbar .nav-link {
    margin: 0;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    width: 100%;
    text-align: center;
  }
  main {
    margin-left: 300px;
  }
}
@media only screen and (max-width: 950px) {
  html {
    font-size: 20px;
  }
  #navbar {
    position: static;
  }
}
@media only screen and (max-width: 725px) {
  html {
    font-size: 18px;
  }
  #navbar {
    position: static;
  }
}
@media only screen and (max-width: 500px) {
  html {
    font-size: 12px;
  }
  #navbar {
    position: static;
  }
}

When I run the tests, it still says I need at least one media query, even though I included the above. What am I doing wrong?

I am using the Brave browser.

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page. Here is a link to the challenge.

2

Did you link the stylesheet?

Show the index.html code if you are still stuck.

3

I did link the styles.css tag like this:

<link rel="stylesheet" href="styles.css">

Here is a link to a CodePen with a copy of my project:

Thank you!

4

something about this code here
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-light.min.css">
is causing the test to fail.
If you comment it out, the test passes.

5

Wow, thank you so much! I commented it out and it worked.

1 Like
6

You can open atom-one-light.min.css in the browser and copy the CSS from the file to the editor CSS.

Or use prismjs it seems to work with no issues.

7

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