Peculiar error in Test Suite for Tribute Page

HTML-CSS
#1

Tell us what’s happening:
Test “#Layout 1.” doesn’t pass. Error message: “Use the “display” style property with a value of “block” for responsive images.: expected ‘inline’ to equal ‘block’
AssertionError: Use the “display” style property with a value of “block” for responsive images.: expected ‘inline’ to equal ‘block’”

I never heard or read that responsive images need to be displayed block. Also the following challenge doesn’t mention displaying images block: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/make-an-image-responsive

Your code so far

#image {
  max-width: 100%;
  height: auto;
}

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

#2

Hi Fritz,
Your code is correct, but the location of it is not. You want to be changing the responsive-img class instead.

#3

Thanks for your reply!

There is no “responsive-img” class in the Tribute Page challenge, just in the “make an image responsive”-Challenge, which I linked as an example.

The problem I’m describing refers to the the test suite for the challenge below “Link to the challenge:” in my original post.

The Tests only pass if I display the responsive image block.

#image {
  max-width: 100%;
  height: auto;
  display: block; /* because of test suite error */
}

I believe the tests should pass with the default display value of img elements as images don’t need to be displayed “block” to be responsive.

#4

Hi Fritz,
Sorry, I must not have read your post well enough!

I had to do a bit of research to answer your question, and came across this post which should answer any questions: Make an Image Responsive - why is display block necessary?

Let me know if you are still confused.

Thanks,
Leonard