Media query issues in "build a product landing page" project

[corgibot]

I’ve tried a couple of things to no avail, the last step is not counting for my project due to “no media query detected”, here is my CSS code, does it look alright? let me know if you’d like to see my HTML as well!:

header {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 19px;
  padding: 25px 0px;
  display: flex; 
  justify-content: space-between;
  align-items: center;
  backgound-color: white;
  opacity: 0.7;
  
   @media {max-width: 500px;} {
    body {
      flex-wrap: wrap;
    }
  }

[Adamus]

Hi @corgibot ,

Welcome to the community! There are errors with your media query. I suggest checking out the lesson on it in the curriculum. I’m sure that’ll help.

[MatchaCrisp]

Sample @media rule:

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

note the condition of max-width:600px is enclosed in () instead of {}

Here is the MDN documentation on media rule.

[Roma]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[corgibot]

I did attempt to enclose the width in () rather than {} but it still isn’t picking it up. I even tried copy/pasting the sample @media code you posted and it didn’t take.

[Roma]

@corgibot

here is my CSS code, does it look alright?

No…

1. Your media query is nested in your header selector
2. Maybe review the lesson on creating a media query. Search for additional information.

When you make changes to your code either;

1. provide a link to your entire code so we can see the changes (BEST)
2. if not providing a link to your code then provide the latest changes so we can see what you did