Hello, i started learning 3 days ago and i got to my first project.im at a stalemate. my image isnt showing and i cant get it to be responsive. thats the only test case left. please what am i missing?
For the image you are using the wrong url. If you right click on the the image and copy image address then the image will show.
This is the correct address:
The reason why your test is failing is because there are some errors in your html due to missing end tags.
You have a lot of extra divs that don’t really need to be there. For example, you have you had one with an id of img-div but you can just throw that in the opening figure tag. Also you had another div for the id image but you can just throw that in the img tag.
It just looks a lot cleaner if you just have a figure, img and figcaption.
<figure id="img-div"> <img id="image" class="responsive-img" src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Stephen_Hawking.StarChild.jpg" alt="Young stephen hawkings on a wheelchair"> <figcaption id="img-caption"> <strong>Stephen Hawkings giving his speech dring a TEDx Talk</strong> </figcaption> </figure>
So that will help with the responsive part and you just want to make sure to properly center the image.
For the gray background you can just apply those styles to img-div instead of full card.
Hope that helps!
thank you. let me try this out
the image did show and i followed your guide…the picture is still not responsive and is refusing to center…
This is not how you apply two classes to the same element.
The proper way is this
But you don’t need to create two classes you can just apply all of the styles from the center class with the responsive class in your css.
it worked. yaay. Thank you so much. i learnt lessons from this