Tribute Page - Build a Tribute Page

HTML-CSS
1

My code looks right, but the tests say it’s wrong…
I am doing one of the certification projects for responsive web design; I’m supposed to build a tribute page. I’ve passed all the tests except two near the end. The console says:
“Your img element should have a display of block.
Your #image should have a max-width of 100%.”

Here is my code:

FINal
FINal1090×471 61.7 KB

I can’t tell for the life of me what’s wrong. Can you help?
Thanks.

2

Please post your actual code instead of a screenshot. Thanks

3

I’m sorry about that. How do I post it?

4

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

5

Thanks. I think I understand now.

6 
<p>Hello World</p>

My code looks right, but the tests say it’s wrong. I am doing one of the certification projects for responsive web design; I’m supposed to build a tribute page. I’ve passed all the tests except two near the end. The console says:

// running tests
Your img element should have a display of block.
Your #image should have a max-width of 100%.
// tests completed

Here is my HTML.

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>Tribute Page</title>
</head>
<main id="main">
  <h1 id="title">Rev. Samuel A. Crowther</h1>
  <figure id="img-div">
    <img id="image" src="https://photos.app.goo.gl/fqVgoSEm67qJ91dJ8" alt="Rev. Samuel A. Crowther" />
    <figcaption id="img-caption">(Blank)</figcaptionl>
  </figure>
  <h2 id="tribute-info">Outline Of Rev. Crowther's Life:</h2>
  <p>BlankSpot</p>
  <p>To learn more about Rev. Samuel Crowther access
    <a id="tribute-link" target="_blank" href="https://www.bu.edu/missiology/missionary-biography/c-d/crowther-samuel-adjai-or-ajayi-c-1807-1891/">this link.</a>
  </p>
</main>

Here is my CSS.

#img-div {
  text-align: center;
}
#image {
  display: block;
  max-width: 100%;
  height: auto;
}
7

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

You need to link to the CSS file.

8

Thanks. That was an obvious mistake. Of course, your solution worked. Sorry to have wasted your time.

1 Like
9

Happy to help, and you are not wasting my time.

It is a very common mistake, you are far from the first to miss that.

10

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