Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Three errors thrown as under-----

  • Your img element should have a display of block.

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

  • Your #image should be centered within its parent.
    Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <head>
    <link rel="stylesheet" href="styles.sheet">
  </head>
  <body>
    <main id="main">
      <h1 id="title">
        Dr. Norman Borlaug
      </h1>
      <p>The man who saved a billion lives
      </p>
      <div id="img-div">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="Dr. Norman Borlaug seen standing in Mexican wheat field with a group of biologists" id="image">
  <figcaption id="img-caption">
          Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields -part of his life-long war on hunger.
  </figcaption>
      </div >
      <div id="tribute-info">
<h3>Here's a time line of Dr. Borlaug's life:</h3>
      </div>
    <h3>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/Norman_Borlaug" target="_blank">Wikipedia entry</a>
  </h3>
    </main>
  </body>    
</html>  

/* file: styles.css */
#image{
max-width: 100%;
height:auto;


margin:0px auto;
}
img{
display:block;
}
#img-div{
text-align: center
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Make img-div display flex justify content center and align items center.
@TechSunny

4

done, still getting same error message as before.

#image{

max-width: 100%;

height:auto;

margin:0px auto;

}

img{

display:block;

}

#img-div{

display:flex;

align-items:center;

justify-content:center;

}

5

Share your full code. I want to seeit, maybe your main content is not margin center with image elements.
@TechSunny

6

i have already shared the whole HTML and CSS code alongwith error thrown…pls go through the begining of the querry. thanx

7 
/* file: styles.css */
#image{
max-width: 100%;
height:auto;


margin:0px auto;
}
img{
display:block;
}
#img-div{
text-align: center
}

This is your CSS, didn’t have any other elements selectors for styleing. You need to try your main element margin to the center .
@TechSunny

8

html code–

Dr. Norman Borlaug

The man who saved a billion lives

Dr. Norman Borlaug seen standing in Mexican wheat field with a group of biologists Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields -part of his life-long war on hunger.

Here's a time line of Dr. Borlaug's life:

If you have time, you should read more about this incredible human being on his Wikipedia entry

css code-
#image{

max-width: 100%;

height:auto;

margin:0px auto;

}

img{

display:block;

}

#img-div{

display:flex;

align-items:center;

justify-content:center;

}

error received-

  • 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.

9

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