Make an Image Responsive, problems with display: block;

HTML-CSS
1

Hey guys I’m having some issues with this lesson. I’ve moved the display every which way but can not get it to work. the max-width and height are accepted, but the display is always wrong. Any advice?

Your code so far


<style>
  
</style>

<img {
  max-width: 100%;
  display: block;
  height: auto;
}
src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 10575.58.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.101 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/make-an-image-responsive

3

randelldawson thanks so much pal. I had been beating my brain with that one. Now it seems so simple. Thank you much.

4

Put this code inside style tags :

img {
max-width: 100%;
display: block;
height: auto;
}

Do not change the code outside the style tags , because what you are trying to do is called inline-style css but what the challenge wants you to do is with Internal Style Sheet which is using css inside tags.

If you still want to apply inline css then this code should help :
style=“max-width: 100%; display: block;height: auto;”
Paste this code inside img tag and let the src and alt attributes remain same.