I can't get media queries to work on my Product Landing Page

I keep trying to add @media in the CSS for the header, but it looks like the changes won’t take affect. Even with the ones that appear to take affect, they won’t register for some reason. I still get 15/16 tests complete.

Here is how your media query should be written

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Here is how you wrote it (Which is wrong)

  @media (max-width: 650px)
    margin-top: 15px;
    width: 100%;
    position: relative;}

Well, I fixed it. And it’s still not registering.

Copy the code I wrote above, paste it in your css and test again.

Then you will have to customize it to your need.

No offense, but it’s still not working. Look:

@import 'https://fonts.googleapis.com/css?family=Roboto';

<meta name="viewport" content="width=device-width, initial-scale=1.0">

* {
  outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }
}

body {
  background-color: black;
  font-family: 'Roboto', sans-serif;
}

#page-wrapper {
  position: relative;
}

li {
  list-style: none;
}

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

div {
  border: solid 1px red;
  margin: 2px;
}

header {
  position: fixed;
  top: 0;
  padding: 0px, 10px;
  display: flex;
  justify-content: space-around;
  width: 100%;
  background-color: grey;
  align-items: center;
  flex-wrap: wrap;
  font-family: Roboto;
  color: black;
}

.logo {width: 60vw;
  
  @media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

#header-image {}

.nav-link {
  font-weight: 400;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 50px;
}

#about {}

#features {
  align-items: center;
  text-align: center;
}

#contact {
  align-items: center;
  text-align: center;
}  

#form {
  align-items: center;
  text-align: center;
}
No media queries detected : expected false to be true
AssertionError: No media queries detected : expected false to be true
    at s.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:262:9102)
    at s.e (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:331:151)
    at Function.n.isTrue (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:224:997)
    at r.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:154:310313)
    at c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:31608)
    at o.f.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:31544)
    at m.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:37114)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:37976
    at s (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:36426)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:36495

is this OK?

.logo {width: 60vw;
  
  @media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Why are you not closing the curly brackets after .logo

I thought I did. Well, I fixed it and it still isn’t working.

OOOOOOOHHHHH, THAT BRACKET. Thank you!

Nimp solved his problem on media queries.

But still i am leaving my experience in solving my problem with media queries. Just doing it for other campers so that they can be helped from this.

I was doing my Technical Documentation Project in my own environment, not on codepen.io. I added the CDN link with my code so that i could test it at any environment. But, even after adding media queries to my CSS , neither Firefox nor Chrome detected my media queries , when they were run into those browsers. I checked for bugs but it was bug free. I was always getting 15/16.

Then, i copy-pasted my code from my code editor and ran it in codepen.io then finally my media queries got detected and i got all the tests passing. Though by then, Chrome and Firefox would still give me 15.

I guess this will help. Happy Coding!!