CSS Media Queries and Grid Layout Adjustments about freecodecamp HOT 7 CLOSED

At the start of this step there's 162 lines, on your screen there are up to 186, that doesn't seem to be right. Try resetting the code and then adding only:

@media only screen and (max-width: 600px) {
  .text-with-images {
    grid-template-columns: 1fr;
  }
}

from freecodecamp.

Hi @ganesh-159th, the code you provided works on my end.

Could you try refreshing the page and resubmitting the code?

from freecodecamp.

Hi @huyenltnguyen
No, I have tried refreshing the page and resubmitting the code, but it is still showing the same error. I have modified the code again, and it is still showing the same error.

If you don't mind, could you paste this updated code and try it again?
.image-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: repeat(3, min-content);
gap: 2rem;
place-items: center;
}

.image-1,
.image-3 {
grid-column: 1 / -1;
}

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

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

.text-with-images {
display: grid;
grid-template-columns: 1fr;
}
}
thanks!

from freecodecamp.

Just to clarify, did you add that entire code to the editable section (the part of the editor that sits between the instructions and the check/submit button)?

For this particular challenge, only the following code is needed:

@media only screen and (max-width: 600px) {
  .text-with-images {
    grid-template-columns: 1fr;
  }
}

So if you added .image-wrapper, .image-1, etc. to the editable section, please remove them, those CSS rules are already available in the stylesheet (you can see them if you scroll up to line 144).

from freecodecamp.

the same error

@huyenltnguyen i have only changed that particular line only but is showing the same error

from freecodecamp.

thank you @gikf the issue has resolve thanks for help

from freecodecamp.

The issue referenced in #55124 has been resolved

from freecodecamp.