Why isn't my imgage responsive task passing?

[Bbobby07]

Tell us what’s happening:

When I adjust my browser my image size responds but the task isn’t passing. Any idea why?

Your project link(s)

solution: https://codepen.io/bbobby07/pen/zYNKmwB

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.72 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

freeCodeCamp.org

[Roma]

When a test fails click the red button to see which test(s) are failing and text to help you correct the issue.

• Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

There is more than one way to have the image responsively resize but the tests only cover one way so it’s best to follow it for this project.

[somaevets]

The issue is inside your img style tag. Run the test and the error message says that it was expecting a display of block.

img {
  transition: all 3s ease-in-out;
  display: center;
  max-width:100%;
}

Change the display tag to block, and then add the margin auto to center the image inside of its parent element and you should be good to go.

img {
  transition: all 3s ease-in-out;
  display: block;
  margin: auto;
  max-width:100%;
}

This should pass the tests. Or at least it did when I tried it.

All the best