Tribute page: image resizes but still failing test

Hi there, thanks for helping! My image is resizing and is centered within my page, but for some reason I’m still failing the final test for FCC –

The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Here is the code pen: https://codepen.io/karebaer/pen/vYNNPPX

hi @karen.kohtz

take alook at the hint

Use the "display" style property with a value of "block" for responsive images.: expected 'inline-block' to equal 'block'

I tried using using “block,” however, that makes the image not centered, and then I fail the “center image” aspect of the test. When I looked up an FCC hint, it suggested “inline-block” instead.

not like that,
at first my thought was like you, then the moderator Roma explained me like this:

<img> element default display value is display: inline-block; so you have to change it to block. and for centering that , you have to find a way centering a block level element.

1 Like

This was very helpful. I used margin-left & margin-right to make it work.

Your page looks good @karen.kohtz. Some things to revisit;

  • Verify your email addr with codepen so we can see your page full screen
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • When using external styling you wouldn’t have the style elements on the page. They are only there if styling is internal on HTML and then they are inside the head element. Do yourself a favor and remove them from the CSS section in codepen. Trust me, there are times when having them there will cause an issue.