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;
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.