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!

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