Build a Product Landing Page--Media Query issue

HTML-CSS
1

Tell us what’s happening:

I got all of the tests to pass within CodePen for the Product Landing project, except the @media query one. I have @media queries in the code, but the system isn’t picking them up at all. I’m not sure what I’m doing wrong. I stripped it all down to the very basic and put one back in, as the test says it needs one. But it’s still not picking it up.

I’m not sure if it is the test suite, or me at this point.

Your code so far

Applicable code. I have also tried several variations of this, with and without the internal .container for example.

.container {
max-width: 1000px;
width: 100%;
margin: 0 auto;
@media (max-width: 600px) {
.container{width: 80%;}}
}

Your browser information:

I am using Chrome for this.

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

Link to the challenge:

2

This is not how you do media queries

.container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  @media (max-width: 600px) {
    .container{width: 80%;}}
}

Should be like this:

.container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .container {
    width: 80%;
  }
}

Edit: If you need more help please link to the actual code (on Codepen or whatever).

1 Like
3

Thank you!! I’d been looking at so many different examples, and everyone was formatting them differently. Thank you. That worked.

1 Like