Learn CSS Grid by Building a Magazine - Step 77

Tell us what’s happening:

Now that the magazine layout is finished, you need to make it responsive.

Start with a @media query for only screen with a max-width of 720px. Inside, create an .image-wrapper selector and give it a grid-template-columns property of 1fr.

This will collapse the three images into one column on smaller screens.

### Your code so far

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0

Challenge Information:

Learn CSS Grid by Building a Magazine - Step 77

Please describe how you are stuck in your own words

@shyanneash18 Hello! The fCC community is here to serve you, but we need your help so we can serve you better. Could you copy and paste or provide a link to all of your code for this? Sometimes there could be more than one issue to resolve in the code. Also what is your question, or what are you struggling with? What have you already tried, and what was the results? Please provide more information.

-Happy Coding!

Now that the magazine layout is finished, you need to make it responsive.

Start with a @media query for only screen with a max-width of 720px. Inside, create an .image-wrapper selector and give it a grid-template-columns property of 1fr.

This will collapse the three images into one column on smaller screens.

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

im stuck on the hole problem. i typed out what all it said, i even tryed chatgpt. if theres more i can put lmk. :slight_smile:

i have found the solution it was just a small error

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

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