Get stuck to make a responsive image

Tell us why this code not work and getting error
Please find the below link to check
https://codepen.io/ajeetg/pen/mdrYZBa

Hey @ajeet-dev

You’re very close to get it right :slight_smile:

Here you’re targeting image which doesn’t exist in your code, you probably mean #image:

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

I made the change as you suggested but still showing error but responsive behavior is shown . Can you help me out why this error come.

Not sure if I spotted this correctly … born 1837?

It’s passed the test, so should be ok?

@ajeet-dev take a look at the error message:

Use the “display” style property with a value of “block” for responsive images.: expected ‘inline’ to equal ‘block’

The requirement of the test suite for the image to be responsive is that it has a display property set to block.

When I use display: block; my image not get centered :slightly_smiling_face:

But in the tutorial it suggest that if the elements are there is no need to use display: block;

You can use margin to center block element like so:

margin: 0 auto;

I’m not sure exactly what you mean. I’m just saying why you can’t pass this last test :slight_smile:

1 Like

Thank you @sitek94, now test passed. Thank you for help.

Test passed when code is:

#image{
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}