Make an Image Responsive - display error

Make an Image Responsive - display error
0.0 0

#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: