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

HTML-CSS
1

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.

2

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;}
3

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

4

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

Then you will have to customize it to your need.

5

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
6

is this OK?

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

Why are you not closing the curly brackets after .logo

7

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

8

Unbenannt
Unbenannt1376×902 55.1 KB

9

OOOOOOOHHHHH, THAT BRACKET. Thank you!

10

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!!

1 Like
11

Hi everyone!!
I’ve realized that if you are making your projects outside CodePen, and you have separate CSS files or any other files (like *.jpg), the script doesn’t detect the other files that you’re reference and bring the failures when you run the test even when you have everything perfect.
Try to upload the project in GitHub pages or something like that and run the test again and works perfectly :kissing_closed_eyes:

2 Likes