Tribute page, image resize error message

1

https://codepen.io/SMR9220/full/ZEbPWYR

. The element should responsively resize, relative to the width of its parent element, without exceeding its original size

I got this error message, although it looks like my pictures all resize appropriately. Is there something I’m missing?

2

There’s more to the message. It further says;
Use the "display" style property with a value of "block" for responsive images.: expected 'inline' to equal 'block'

Two things;

  • It will fail again but for a different reason. Be sure and read the entire message.
  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
3

If I set “display: block;” this makes the image not centered. How can I make the image centered and responsive?

4

It’s annoying for me, or anyone trying to help you, to have to add the test script to see any failing error message.
Please add the test script as mentioned in my previous post and leave it there. Plus, it should be there when you submit any of your projects.

Let me know when you’ve done that and I’ll give you a hand.
Thank you.

5

https://codepen.io/SMR9220/pen/ZEbPWYR

Took me 25 min to figure out how/where to put the test script. Please bear with me, I am a noob.

6

Everyone was a noob at some point. How did you know what tests were failing if you didn’t have the test script?

So now if we look there needs to be a way to ensure that the #image is centered. This can be easily done automatically by using something like a property: value; of margin: auto;

As an aside, this is also something that could have been found buy utilizing the Search part of the Read-Search-Ask method and using a good Google search.
Even easier, this has been asked multiple times within this forum and a search of the forum would have yielded the answer.
I’m not being harsh. Just letting you know that answers can be found very easily by doing a little research first. As a dev, it’s something you’ll do daily…hourly even.

7

I set the display to inline-block, 0 margin…nothing is correcting the error.

What I’m asking for is another set of eyes to look over the code to see if I made a minor mistake. I need to assess the problem backwards from the solution in order to learn and move forward.

8

Why did you change to display: inline-block when it’s supposed to be display: block;?
And I don’t know what 0 margin is when I said margin: auto;

9

When I set it to display: block; the image is no longer centered.

I changed it to display: inline-block because i was trying to use the text-align method to center the image, as shown Here .

When I set the display to margin: auto, the image is responsive but no longer centered.

10

I solved it! The problem was in HTML, not CSS.

I embedded each figure tag in a div element. (don’t now why)

I deleted the divs, and named the figures with those deleted div Ids, so that the CSS rules then applied to the figure, not the entire div element.