Make an Image Responsive - help

HTML-CSS
1

Tell us what’s happening:

I have no idea what’s wrong with my codes.
The test results are like:
(O) Your img tag should have a max-width set to 100%.
(X) Your img tag should have a display set to block.
(O) Your img tag should have a height set to auto.

I already set the display to block as you can see in below codes.
Is this a bug??

Your code so far


<style>
  
</style>

<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set"

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

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

2

The new code you added is not in the correct place. Look at the first few lines in the code. They start with <style> and some blank lines and then </style>. All CSS should go in between these two lines. (FCC tries to help you by leaving the blank line for you as a hint)
The area you currently have your code is the html only area of the file.
hope this helps.

1 Like
3

It should look like this…

<style>
img{
    max-width: 100%;
    display: block;
    height: auto;
}
</style>

You have it in the wrong spot.