Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Hi! it is saying

  1. Your img element should have a display of block .
  2. Your #image should have a max-width of 100%
    • Failed:Your #image should be centered within its parent.
      I have tried adding display="block to my img element as well as .image{
      max-width: 100% . I am confused on how to center it within its parent though. Please help I am very new to coding. Thanks.
      Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css"/>
    </head>
  <main id="main">
    <h1 id="title">Dr.Norman Borlaug</h1>
   <p>The Man Who Saved A Billion Lives</p>
    <figure id="img-div">
      <img id="image" src="https://tribute-page.freecodecamp.rocks/" display="block"> 
<figcaption id="img-caption">Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</figcaption>
<figure id="tribute-info">
  <h2>Here's a timeline of Dr.Borlaug's life:</h2>
  <ul>
<li><strong>1914</strong> -Born in Cresco, Iowa</li>
<li><strong>1933</strong> -Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"<li>
  <li><strong>1935</strong> -Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."</li>
  </ul>
  <blockquote>
    <p>"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and scientific vision can make to human peace and progress."

-- Indian Prime Minister Manmohan Singh</p>
</blockquote>
<h3>if you have time, you should read more about this incredible human being on his</h3>
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wikipedia entry.</a>
 </main>
</html>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14816.131.4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

the CSS code should be added to the styles.css file (it looks like yours is empty right now)

As for centering, usually this is done by making the margin: auto;
(left and right should be auto for the img and its div)

3

I thought I had already done the CSS could you tell me the code for it please.

4

I can’t give you the code, but you can revise some of your curriculum work in fcc or you can look up specific css properties in google.
For eg. search for
css display block

5

More than likely, it is wanting you to use your CSS file to style the page, so do that instead of inline-CSS to start off. As far as centering the child objects of your element, you can try setting the margins to auto for your image and its container as someone has already suggested…another way would be to assign the container a display of flex and then setting its justify-content(x -axis) and align-items(y-axis) properties to “center”. Either way should work.

6

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