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

HTML-CSS
1

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.

2

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

And the link to the challenge?

thanks

3

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; 
}
4

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.

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 (').

1 Like
5

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
6

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>