Build a Magazine

HTML-CSS
1

Step 76
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;
  }
}

Sorry, your code does not pass. Keep trying.

You should have a new @media rule for only screen and (max-width: 720px).
type or paste code here

anybody could help me out ?

2

Please post a link to your current step

3

okay

4

Hi @zackazanaw13

Your solution works from my end with the code you supplied.

You may have accidently altered some of the other code. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

Happy coding

5

Thanks man i will check it out

1 Like