Problems with the "Tribute Page" - Certification Project from the Responsive Web Design course

I don’t know if more people are having the same problem, if it is a bug, or even if my code is wrong (which i believe its not cause its a very simple code and had the correction of chatGPT), but here it goes:

My CSS code is like:

img {
  display: block;
}

#image {

  max-width: 100%;
  justify-content: center;
  margin: auto;
}

#img-div {
  display: flex;
  justify-content: center; 
}

And the requested topics keep saying that the codes are wrong:

Failed: 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.

Maybe not all the codes are correct, im a beginner ( even though chatgpt has made its corrections) but a simple code as–> img { display: block; } ← isn’t that hard and keep saying that is wrong, so i don’t know.

Any answers or contribution i would appreciate.

Thanks in advance.

Can we have your HTML too to test it on our ends?

And the link to the challenge?

thanks

Hi,

Thanks for entering in contact. Sure.

Here is the link:

Here the HTML code:
(is this readable?)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tribute Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main id="main">
    <h1 id="title">Super Hero</h1>
      <figure id="img-div">
        <img id="image" alt="Super Hero Picture">
        <caption id="image-caption">My Super Hero</caption>
        <figcaption id="img-caption">Picture of My Super Hero</figcaption>
        </figure> 
        <div id="tribute-info">
          <p>Super Hero Tribute Info</p>
        </div>
          <a id="tribute-link" target="_blank" href="">Super Hero</a> Info
  </main>
</body>
</html>

And here the CSS:

img {
  display: block;
}

#image {

  max-width: 100%;
  justify-content: center;
  margin: auto;
}

#img-div {
  display: flex;
  justify-content: center; 
}

I’ve edited your code for readability. 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.

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

1 Like

Your are linking to the wrong css file

that will fix most of your failing tests

as for this test

Your #image should be centered within its parent.

when I commented out your styles for the img-div it passed

1 Like

Thank you so much!!!
It worked!!! it was just a missing "s"in styles.css, can’t believe haha.

Appreciate!

also thanks for the tips

<p>How to properly send codes in a forum</p>

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