Make an Image Responsive - display error

HTML-CSS
1

Hi guys,

I got stuck on one of the challenges within the basic CSS course. Here’s what I have to do:

Add style rules for the img tag to make it responsive to the size of its container. It should display as a block-level element, it should fit the full width of its container without stretching, and it should keep its original aspect ratio.

Below is what I’ve done but I get an error message:

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

Above code is included within ‘style’ but unable to paste this correctly here; first time I’m using help…

Ran out of ideas of what is wrong with the code. Apparently width and height is set correctly, problem is with the display.

Thanks !

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

2

Should be

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

you missed img tag.

if correct…Mark it as a solution.

3

So true… Can’t believe I’ve spent hour on this…Thanks :slight_smile:

4

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

But it won’t pass me and says this
“Your img tag should have a display set to block.”
Am I doing something Wrong