Step 20 - Photo Gallery Bug?

[sinarad]

Hey everyone,

I’m currently on the “Learn CSS Flexbox by Building a Photo Gallery” stage of the Learn Responsive Web Design course. I’m pretty sure I’m doing this step correctly, but no matter what it keeps giving me an error, saying I haven’t set my media query to 800px.

I’ve attached screenshot below of what I’m referring to.
Any help would greatly be appreciated!
Thank you.

[sinarad]

I kept trying different things and eventually this was the correct code. I haven’t seen media queries written like that anywhere, but no problem, so long as the step was passed

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

[Roma]

Good that you were able to figure it out @sinarad.

I’m not sure what you mean by

@sinarad

I haven’t seen media queries written like that anywhere

Since the beta is new I do not recall if you were previously introduced to media queries but what you have is standard.
It comprises the media query rule and within that you will specify any selector(s) you want and within the selector any property: value; pair(s) needed.

You can do a generic search on something like html media queries to read up on their use.

[sinarad]

Hi Roma,

Thanks for the comment!

I was just a bit confused regarding the syntax of @media queries. Normally, I see them written in this form [@media only screen and (max-width: 800px)]. But here, it required I write just [@media (max-width: 800px)]. Do the words “only”, “screen”, “and” not matter?

[Roma]

They do. It depends on how you need your media query.
For instance I have a recipe app that has delete and back buttons when viewing the individual recipe through the browser. But when I print off the recipe there’s not need for those buttons to display so my query is set up like

@media print {
  .btn-primary, .btn-danger {
    display: none;
  }
}

Notice it’s set up so it only runs when printing.
There is a lot more to media queries than I can type here. It’s one of those things you’ll have to research. Start with maybe the generic search I gave in my previous post.
And use FCC’s mantra of Read Search Ask.

[sinarad]

Ok great.
I’ll do a bit more digging around and see where I end up.
Thank you sir.

[Roma]

Glad to have helped.

Always come back and ask if there’s something you don’t understand.