Tribute Page - Build a Tribute Page: Your img element should have a display of block. , Your #image should have a max-width of 100%

HTML-CSS
1

Tell us what’s happening:
Hi I am having trouble with:

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

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

I have done everything to the best of my knowledge including:

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

img {
display: block;
}

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="Tribute Page" content="Project/>
    <title>Tribute Page/title>
    <link rel="stylesheet" href="styles.css" />
  </head>


<main id="main">
  <header id="title">
    <h1>Dr. Norman Borlaug</h1>
    </header>
    <body>
      <div id="img-div">
      <div id="img-caption">The man who saved a billion lives</div>
      <img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" width="100%" max-width="100%" display="block">
      </div>
      <div id="tribute-info">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.</div>
      <a id="tribute-link" href="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" target="_blank">

    </body>
</main>
</html>

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

}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

Hi @DHrndz

Welcome to FCC.

I have noticed the following errors with your HTML code. It should be good after correcting them.

  • Check the code below. Something is not quite right here.
  • Similarly, the code below. That is not valid.
  • Finally, you have mixed up the body tag. The whole HTML structure should look something like:
<!DOCTYPE html>
<html lang="en">
  <head>
     <!-- head elements should go here -->
  </head>
  <body>
    <!--  body elements should be here -->
  </body>
</html>
1 Like
3

image
image1596×66 14.2 KB

Take a look at what you have typed in this snippet of html code: width, max-width, display. These are the css properties and their values. They don’t belong here.
Your ‘a’ element doesn’t have the closing tag:

<a href="url">something that is hyperlinked</a>
1 Like
4

Hi,

Thank you for the warm welcome.

I was able to pass the project. All I had to do is type everything again and go through it slowly and check my mistakes from before.

Thank you once again for the help.

1 Like
5

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