New Responsive Web Design Step 20?

[gpr]

I’m confused why this code isn’t working. The prompt is as follows:

Step 20

Create a media query for screens smaller than 800px in width. In that media query, create a #gallery img rule and set the width property to 50% . This will convert your gallery to a two-column layout.

This is my code:

@media screen and (max-width: 800px) {
  #gallery img {
    width: 50%;
  }
}

I’m using w3 as a reference:

CSS Media Queries

Sorry if this post isn’t formatted right, first time posting in the forum.
But could anybody help me understand what I’m missing?

[ilenia]

what’s the link to this challenge please?

[gpr]

It’s here:

freeCodeCamp.org

[ilenia]

@gpr

@media screen and (max-width: 800px) {
  #gallery img {
    width: 50%;
  }
}

try without the media type

[gpr]

@media (max-width: 800px) {
#gallery img {
width: 50%;
}
}

I tried it and it worked like this, thank you. If you wouldn’t mine explaining? Why does this work rather than the including the media type? Would it just be due to fCC requiring it to be formatted this way? Or is there some error with the initial way I coded it which included the media type?

[ilenia]

it’s how for how the tests are that the other code didn’t pass, it is not wrong per se

[davidmphande18]

From your code remove ( screen) and (and ) it will work

@media (max-width: 800px)

[uttammanani]

I am trying this code:

@media (max-width: 800px){
  #gallery img{
    width: 50%;
  }
}

It is giving me an error and not passing the test.
Any solution to this?

[ilenia]

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.