Learn CSS Grid by Building a Magazine - Step 77

HTML-CSS
1

Tell us what’s happening:
fcc says " You should have a new @media rule for only screen and (max-width: 720px) ."
Your code so far
@media(max-width: 720px){
.image-wrapper{
grid-template-columns: 2fr;
}
}
NOTE: The code works well, and the page places the contents in a single column of width 1fr so I am not sure what the warning is about. Previously, the content was in two columns, so I placing all content in one column for smaller screens.

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

@media(max-width: 720px){
  .image-wrapper{
    grid-template-columns: 2fr;
  }
}

Your browser information:

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

Challenge: Learn CSS Grid by Building a Magazine - Step 77

Link to the challenge:

2

The challenge is asking for

give it a grid-template-columns property of 1fr .

You actually have 2fr

3

@Cody_Biggs thanks for pointing this out. I changed it to 1fr but still didn’t pass. But I checked it out at w3schools and found that I need to use “@media only screen and (max-width: 720px)” instead of the “@media(max-width: 720px)” that I was used to. They both work as I expect so I am not sure why one is preferred over the other so I’ll read more on that. My code passed, I’m happy, and thanks so much!!

4

Yeah, I looked back the directions and noticed I skipped over where it says to use only screen as well lol. Glad you got it working

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.