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.