Trouble w/ img-responsive on Tribute Page

HTML-CSS
#1

Howdy folks – I’m a total JavaScript noob getting my feet wet with freecodecamp, so thank you in advance for any help. I’m having trouble getting past the 9th test (responsive image) for my first project (the tribute page) project. I’ve been googling the topic and searching the forums here, but thus far none of the solutions I’ve found seem to do the trick.

Here’s my pen:

The problem image and parent are here:

<div id="img-div">
        <img id="image" src="https://i.imgur.com/AC1g46I.jpg" class="img-responsive" alt="Cullen holding a Prime helmet" />
        <div id="img-caption">Cullen holding an Optimus Prime helmet</div>
</div>

And for my image I’m using the following CSS:
img.center{display:block; max-width: 100%; height:auto;}

From everything I’ve read, I expected this to work, but the test fails with this:

The element should responsively resize, relative to the width of its parent element, without exceeding its original size. AssertionError: Try using the “max-width” style property : expected ‘none’ to not equal ‘none’

Note, I’ve tried two additional things but took them back out after I saw no change:

  • Tried adding a “width: 100%;” to the CSS above.
  • Tried changing img-responsive to img-fluid.

I feel like I’m missing something really obvious; perhaps I’ve been staring at it too long. Any guidance would be hugely appreciated, as I think this is my last remaining hurdle to pass the test.

#2

As I see in your code, the style rules for the image with max-width property applies to an image of the class center, but in the html there is no image with that class.

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

<img id="image" src="https://i.imgur.com/AC1g46I.jpg" class="img-responsive" alt="Cullen holding a Prime helmet" />
1 Like
#3

Thank you so much zdflower! Indeed, as I had expected, it was something obvious. :slight_smile:

I was thinking backwards; I named it center because I thought that was invoking some “center” function. Once I changed it from “img.center” to “img.img-responsive”, it worked like a charm.

Also, I apologize for taking so ridiculously long to reply. I got pulled away toward some urgent matters so it’s taken me a couple of weeks to revisit this.

#4

No problem. I am glad to help! :grinning:

#5

Your class name should start with a full stop. eg :
.Image-center{…}
and inside the img element the class name should be same as you defined in CSS code.
eg: Here class name=“Image-center”.
add(<)img id=“img” class=“Image-center” src="…"add(>)
Corrections: Change class name img.center as .img-center and enter class name in img element as class=“img-center”

#6

What if I don’t want to work with CSS and want to add the “max-width” attribute into the element “img”? I’ve tried simply adding ‘max-width=“100%”’ into “img” but it doesn’t work…

I’m pretty new in HTML, so I’m suffering a lot in this first test lol

#7

@carolaggio I would recommend that you not include that property in HTML and let it remain in CSS. However if you do want to know how to add it to your html directly,you will have add it as an inline style .
<img style={“max-width”:100%} />

1 Like
#8