What's wrong with my media queries?

HTML-CSS
1

My media queries don’t work in freecodecamp’s editor but in vscode they do and I don’t know where the problem is. The content inside the media queries won’t show and I also can’t pass the last user story because of this. What did I do wrong?

 @media (max-width:699px) {
    #content {
        display: none;
        background-color: #f1f1f1;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    #navbar:hover #content {
        display: inline-block;
    }    
  }

  @media (min-width:700px) {
    body {
        display: flex;
    }
    nav {
        background-color: #f1f1f1;
        display: inline-block;
        width: 40%;
    }

    h1 {
        padding-left: 2%;
        width: 17.2%;
        position: fixed;
     }

    #content {
        display:block;
        box-shadow: none;
        width: 26.3%;
        position: fixed;
        margin-top: 5%;
    }

    .nav-link {
        border: 1px solid #ddd;
        font-size: 1.4vmax;
        padding-left: 9%;
    }

    main {
        width: 100%;
        margin-left: 2%;
        margin-right: 5%;
    }
  }

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

I might need your html to find the problem.

At this point I can say, have you linked the css to the html using the link element.

Example:

<link href="styles.css">
3

OMG! You are right! Since I worked a part of my project in vscode, I used the css name file that I have on my computer and I forgot to change it when I started working on freecodecamp again. Thank you so much. I feel so silly right now.

1 Like
4

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