Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

I’ve tried all sorts of variations to quell the error I am getting about img needs to display: block, but nothing is working

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="description" content="freeCodeCamp Tribute Page" />
    <title id="title">Tribute Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
<body>
  <header>
    <h1>Angelo Moriondo</h1>
  </header>
  <main id="main">
    <div id="img-div">
      <img id="image" src="https://3.bp.blogspot.com/-ZI7fYH_Dfyw/WS5yufO-ulI/AAAAAAAAFI8/eHsW0avCc-MP7yqq1mwM3zUW6HpPAs5pgCLcB/s1600/Angelo-moriondo-espresso-machine-first-patent.jpg" alt="Angelo Moriondo">
      <figcaption id="img-caption">Angelo Moriondo, inventor of the espresso machine, patented the invention in 1884.</figcaption>
    </div>
    <div class="tribute-all">
      <h2>A bit about Angelo</h2>
      <div id="tribute-info">
        <ul>
          <li>Born in June 1851 in Turin, Sardinia. He passed away in 1914 in Marentino.</li>
          <li>Being from a family of entrepreneurs, Angelo purchased  the Grand-Hotel Ligure in the city-centre Piazza Carlo Felice and the American Bar in the Galleria Nazionale of Via Roma.</li>
          <li>The real significance in his career came in 1884 however when he officially patented the first espresso machine as a way to make coffee faster.
          </li>
          <li>While he continuously updated his invention between that time and his passing, he never took the espresso machine to industrial scale. With a mix of jealousy and marketing saavy, he insisted his machines be used as a way to get people to his establishments due to them being the only ones that used the system.
          </li>
        </ul>
      </div>
      <div class="tribute-link69">
        <p>To learn a bit more about this innovator of the coffee industry, <a id="tribute-link" href="https://en.wikipedia.org/wiki/Angelo_Moriondo#:~:text=Angelo%20Moriondo%20(6%20June%201851,water%20to%20efficiently%20brew%20coffee." target="_blank">click here</a>
    </div> 
  </main>
</body>


/* file: styles.css */
img {
  display: block;
  max-width: 100%;
}

#image {
  max-width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

1 Like
2

Hello,
You made your image display block then you override it by making it display flex in the next rule, so you have to remove the display flex property.

1 Like
3

hi there!
you need to remove the display flex and justify content center form #iamge selector. and add margin top, bottom 0, and left , right auto. and set the height to auto within img selector.

4

Ahhh that makes sense. Thank you!

1 Like
5

Ah, makes sense. Thank you!