FCC: Tribute Page - Failing User Story #8

HTML-CSS
1

Hi guys, my Tribute page keeps failing the User Story #8

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

I’ve triple checked it myself, thrown it through the HTML validator and checked it agianst the example provided and still can’t work out the problem. I think it’s something to do with the max-width: 100%; but I’m not certain.

Here’s a link to my pen:
Tribute page

Thanks in advance all

2

Hi @RyanArcher !

Welcome to the forum!

It doesn’t look like you have an id called #img unless I missed it.

You also need the margin property.

3

Also remove these inline styles from your html.

style="width: 400px; height: 200px;"

4

HI…

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

You don’t have #img id in your html

here’s a quick fix! →

  • remove the #
  • add margin: 0 auto;
5

Thanks so much guys, it looks a bit messier with the larger image but passes the tests!
I would add jwilkins.oboe as the solution too but I can only pick one and seekinfox had all of the information in one post, sorry.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.