Tribute Page - Build a Tribute Page

Tell us what’s happening:
Describe your issue in detail here.
figcaption and img not working together

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang='en'></html>
<head>
 <title id='title'>Dr.APJ ABDUL KALAM</title>
 <meta charset='UTF-8'>
 <link rel='stylesheet' href='./styles.css'>
</head>
<body>
 <main id='main'>
   <div class='heading'>
     <h1>Dr.APJ Abdul Kalam<H1>
       <h4>The missile man of India</h4>
   
   
 <figure id="img-div">
   <img id="image" src="https://thelogicalindian.com/h-upload/2020/10/15/183601-whatsapp-image-2020-10-15-at-43100-pm.jpeg">
  <figcaption id="img-caption">Dr.APJ Abdul Kalam made india self dependent in missile
    </figcaption> </figure>

    
      
      <div id='tribute-info'> <h3>Journey Of DR.APJ ABDUL KALAM </H3>
      <ul>
        <li>Born on 15 october 1931 in Rameshwaram,Tamil nadu</li>
        <li>Completed higher education in Schwartz Higher Secondary School, Ramanathapuram</li>
        <li>Attended the college Saint Joseph's College, Tiruchirappalli</li>
        <li>Completed graduation in physics with the University of Madras</li>
        <li> In 1955 he studied aerospace engineering in Madras Institute of Technology</li>
        <li>Kalam served as the 11th president of India, succeeding K. R. Narayanan</li>
        <li>His term lasted from 25 July 2002, to 25 July 2007</li>
        <li>Signing the Office of Profit Bill was the toughest decision he had taken during his tenure</li>
        <li>Kalam supported the need of Uniform Civil Code in India</li>
        <li>After leaving office, Kalam became a visiting professor at the Indian Institute of Management Shillong</li>
        <li>In 2011, Kalam was criticised by civil groups over his stand on the Koodankulam Nuclear Power Plant</li>
        <li>In May 2012, Kalam launched a programme for the youth of India called the What Can I Give Movement, with a central theme of defeating corruption</li>
        <li>Kalam received 7 honorary doctorates from 40 universities</li>
        <li>The Government of India honoured him with the Padma Bhushan in 1981 </li>
        <li>The Padma Vibhushan in 1990 for his work with ISRO and DRDO and his role as a scientific advisor to the Government</li>
        <li>Kalam received India's highest civilian honour, the Bharat Ratna, for his contribution to the scientific research and modernisation of defence technology in India</li>
        <li>On 27 July 2015 He died while attending a session in shilong</li>
        <li>But he still lives in the heart of every Indian</li>
     </ul>
     <p>" India can never forget his indelible contribution towards national development, be it as a scientist and as the President of India. His life journey gives strength to millions".</p>
     <h3>--INDIAN PRIME MINISTER NARENDRA MODI</H3>
    <section id='wikientry'> <H4>If you have time, you should read more about this incredible human being on his<a id='tribute-link' href='https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam' target='_blank'> Wiki entry<a> </section>
 </main>
</body>
/* file: styles.css */
.heading{
 background-color: #d9dfbd;
 text-align: center;
height: 150px;
width: 100%;

}
body{
 font-family: sans-serif;
 background-color: #d9dfbd
 ;
}
h1{
padding-top: 25px;
}
#img-div{
 max-width: 100%;
 height: auto;
 padding-bottom:15px;
 display: flex;
padding-right: auto;
 justify-content: center;
 margin:0 auto;
}
.figcaption{
 padding-top: 15px;
 text-align: center;
 color: red;
 line-height: 5px;
 margin-bottom: 10px;
}
li{
 margin-left: 30%;
 margin-right: 0
}
ul{
 text-align: left;
 line-height:  40px;
}
p{
 text-align: center;
}
#wikientry{
 margin-bottom: 20px;
}
img{
 max-width: 100%;
 display: block;
   display: flex;
   margin-left: 18%;
}
#tribute-info{
 max-width: 100%
}
   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

No, it’s not an issue of the figcaption if you are not passing the tests, but with your css.

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

If you have two display properties, only the bottom one will be applied.
Also, display: flex is reserved to containers, it doesn’t really make sense to have it on an img element.

For the other failed test

Your #image should be centered within its parent.

If you have display: flex, the image can’t be centered.

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