Fixing last error on tribute page

I do not understand what this error means at all. I know it’s about formatting, but how do I fix this?

1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.[Muhammad Ali Tribute Page]

(https://codepen.io/Cole97/pen/OJXprPq)

1 Like

The width of your image is always the same, no matter what size the screen is.

Remove the image element’s height property (which has the value 200) and your problem is solved. And if you want it to be responsive in terms of height also, then mention the height as %.
Hope this solves the issue.

Hello bro, you must set the display property value to block in #image, not inline value.

display:block;

I hope you will pass this test.

I’m still getting the same error. I was not able to resolve it. I changed the display to block, and it gave me an 8/10. I changed it to inline and I am back to 9/10. I still have not resolved the initial issue. Thanks for the help.

@NDanek97, are you still having an issue with this? It seems you are.

If you read the error message it says;

1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.  
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'

When you make the change and run the tests you will see 8/10 tests passing but rather than just looking at the numbers, read the failing tests and see what they say.

The two failing tests are now different. Something in your code that is incorrect. The failing test (after you make the change to the display now say;

1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.  
Use the "height" style property with a value of "auto" for responsive images.: expected '200%' to equal 'auto'   
AssertionError: Use the "height" style property with a value of "auto" for responsive images.: expected '200%' to equal 'auto'  

You should review this lesson on making an image responsive to understand.

And the other failing test message says;

2. The <img> element should be centered within its parent element.  
Image is not centered: expected 0 to be close to 610 +/- 11  
 AssertionError: Image is not centered: expected 0 to be close to 610 +/- 11  

What lesson covered using the margin property to center an image horizontally?

Hope this helps.

Thank you! Not only is your tribute page beautifully designed, but you helped me fix the troublesome last user story which I just couldn’t get until looking at your one, I was able to fix it! Jayne :blush: :kissing_heart: