I need help 😎with IMG on Tribute page

:stuck_out_tongue_winking_eye:'m having trouble with the Tribute page Cert . I’ve been trying to figure it out for 2 days but feel I am just adding unnecessary code. I cleaned it up to what I think it should be but still no passing, these 3 issues:

  • Your img element should have a display of block.

  • Failed:Your #image should have a max-width of 100%.

  • Failed:Your #image should be centered within its parent.

Here’s the image part of the HTML code:

type or paste code <link rel="stylesheet" href_="styles.css"/>

  <title id="title" type="text">Malala Yousafzai</title>
  <h1>Tribute To Malala Yousafzai Nobel Peace Prize Recepient</h1> </head>

 <body>
  <figure id="img-div">
  <img-div>
  <img src="https://commons.wikimedia.org/wiki/File:Shinz%C5%8D_Abe_and_Malala_Yousafzai_(1)_Cropped.jpg" alt="Malala" id="image" display="block"/><br>
      <br>
    <figcaption id="img-caption">Fig.1 - Malala Yousafzai, (2019) Youth and Women's Activist, Nobel Peace Prize (2014)
    </figcaption>
   </img-div>
   </figure>
here

Here’s the CSS code:
img {
display: block;
}

#image {
max-width: 100%;
height: auto;
margin: auto;
}
#img-div {
margin: auto;
}

Here’s a link to codepen.io: https://codepen.io/suzkuda/pen/RwMwJLe

Thank you in advance for any help you can provide! :heart_eyes:
Suz

you are targeting #image but I can’t find it in any img tag in your code

give the img tag id of image

After the URL there is an id=“image”. It still does not work. I copied everything to codepen and asked it to validate the code. It did not find any errors. I thought it was because I was not centering it correctly. I appreciate your help to track this down.

what the error is shown now, please post your updated code

display: block is a css property

#image {
max-width: 100%;
height: auto;
margin: auto;
display: block;
}
#img-div {
margin: auto;
}
I removed it from HTML and ran the CSS as above.

I still get the 3 errors:

  • Failed:Your img element should have a display of block.

  • Failed:Your #image should have a max-width of 100%.

  • Failed:Your #image should be centered within its parent.

for centering the image you should give it margin of 0 auto

<img-div>

is not any html tag or it’s incorrect to create elements like that, you should remove it

you should give min-width property to #image with some value for example 20px

I ran with this changed CSS still same 3 errors:

#img-div {

text-align: center;

display: block;

filter: grayscale(100%);

width: 100%;

}

#image {

max-width: 500px;

min-width: 20px;

width: 100%;

display: block;

margin: 0 auto;

}

[quote=“suzkuda, post:11, topic:523083”]
#img-div {

text-align: center;

display: block;

filter: grayscale(100%);

width: 100%;

}
[/quote]myou should not target #img-div for now, remove it to see your #image errors are removed or not, and you should have max-width 100% as instructions ask you

Thank you for your help but I still get the same 3 errors. I looked on several forums and there are a lot of different people trying to write the code for this with different thoughts about max-width. I changed it back to 100% as you suggested and removed the #img-div as you suggested. It still does not pass. I have gone through all steps again, and it appears that it is step 8 of the 9 steps that I am having this issue on. I will go back to 3Wschools again to research responsive images centered within a parent. I guess this is real web development. I appreciate all your suggestions and help! :heart_eyes::coffee:Have a cup of coffee while I go check this out.

1 Like

haha, sip sip… I think I need some sugar :rofl: I have sent you a private message, you will have green notification with number on it

I went through my code this morning character by character after trying all the suggestions. I had left out 2 “>” at the end of image elements. My code passed. Thank you all for the suggestions!