Tribute Page - Build a Tribute Page - img element with display: block

HTML-CSS
1

Tell us what’s happening:

The code checker does not accept the code line
img {
display: block;
}
and stiil gives the error
“You should give your img element a display of block.”
I cannot pass this step.
Any help appreciated.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title id="title">Falih Rıfkı ATAY</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main id="main">
      <div id="img-div">
        <img id="image" >
        <figcaption id="img-caption">Portrait Falih Rıfkı ATAY</figcaption>
      </div>
      <p id="tribute-info">Falih Rıfkı kurtuluş sürecinde Atatürk'ü daima izleyen, kuruluş sürecinde daima yanında olan gazeteci oldu.</p>
      <a id="tribute-link" href="http://www.wikipedia/falihrifkiatay" target="_blank">Falih Rıfkı ATAY - Hayatı</a>
    </main>
  </body>
</html>

/* file: styles.css */
#image {
  max-width: 100%;
  height: auto;
  display: flex;
  margin: 0 auto;
}

img {
  display: block;
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

Hi,
in your css, #image and img are styling the same element. One has display: flex; and the other has display: block; that’s causing the error.
Good luck!

3

Dear Pal,
Thank you very much for your help.

For those who are as illiterate as myself, the solution:
Simply deleted the “display: flex” in the #image part and it worked.
Cheers.

1 Like