Tribute Page - Build a Tribute Page

Tell us what’s happening:
I am doing the tribute page project by attempting to make a replica of the provided example site, i passed all of the tests but i failed at
– Your img element should have a display of block.
– Your #image should have a max-width of 100%.
– Your #image should be centered within its parent.

but i have these rules set in my code, so am i doing something wrong?
Your code so far
The entire HTML for the image and its parent

<figure id="img-div">
            <img id="image"
                src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg"
                alt="a picture of some guys smiling">
            <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>

CSS for the image

#img-div > #image{
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

Hello!

I hope this following article from freeCodeCamp news, will help you solve the problems you are facing with the image.

1 Like

Thanks for sharing this, i have tried another method to center the image but the issue is not with the image not being centered rather in the test conditions not being fulfilled proven by the Max-width and the display also not being accepted even though i included the proper lines of code

1 Like

I was hoping it would help you solve the problem.

Are you able to use the help, or the </> preformatted at the top of this textarea to provide your complete code for both html and css? This will allow us to better address the issue and guide you to solve it?

1 Like

Of course he is the full code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <!--Fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
        rel="stylesheet">
    <title>Tribute-page</title>
</head>

<body>
    <main id="main">
        <header id="header">
            <h1 id="title">Dr. Norman Borlaug</h1>
            <p id="title-line">The man who saved a billion lives</p>
        </header>
        <figure id="img-div">
            <img id="image"
                src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg"
                alt="a picture of some guys smiling">
            <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>
        <div id="tribute-info">
            <h3>Here's a time line of Dr. Borlaug's life:</h3>
            <ul>
                <li><span class="bold">1914</span> - Born in Cresco, Iowa</li>
                <li><span class="bold">1933</span> - 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><span class="bold">1935</span> - 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>
                <li><span class="bold">1937</span> - Finishes university and
                    takes a job in the US
                    Forestry Service </li>
                <li><span class="bold">1938</span> - Marries wife of 69 years
                    Margret Gibson. Gets laid
                    off due to budget cuts. Inspired by Elvin Charles Stakman,
                    he returns to school study under Stakman, who teaches him
                    about breeding pest-resistent plants. </li>
                <li><span class="bold">1941</span> - Tries to enroll in the
                    military after the Pearl
                    Harbor attack, but is rejected. Instead, the military asked
                    his lab to work on waterproof glue, DDT to control malaria,
                    disinfectants, and other applied science.</li>
                <li><span class="bold">1942</span> - Receives a Ph.D. in
                    Genetics and Plant Pathology
                </li>
                <li><span class="bold">1944</span> - Rejects a 100% salary
                    increase from Dupont, leaves
                    behind his pregnant wife, and flies to Mexico to head a new
                    plant pathology program. Over the next 16 years, his team
                    breeds 6,000 different strains of disease resistent wheat -
                    including different varieties for each major climate on
                    Earth. </li>
                <li><span class="bold">1945</span> - Discovers a way to grown
                    wheat twice each season,
                    doubling wheat yields </li>
                <li><span class="bold">1953</span> - crosses a short, sturdy
                    dwarf breed of wheat with a
                    high-yeidling American breed, creating a strain that
                    responds well to fertilizer. It goes on to provide 95% of
                    Mexico's wheat. </li>
                <li><span class="bold">1962</span> - Visits Delhi and brings his
                    high-yielding strains of
                    wheat to the Indian subcontinent in time to help mitigate
                    mass starvation due to a rapidly expanding population </li>
                <li><span class="bold">1970</span> - receives the Nobel Peace
                    Prize</li>
                <li><span class="bold">1983</span> - helps seven African
                    countries dramatically increase
                    their maize and sorghum yields </li>
                <li><span class="bold">1984</span> - becomes a distinguished
                    professor at Texas A&M
                    University </li>
                <li><span class="bold">2005</span> - states "we will have to
                    double the world food supply
                    by 2050." Argues that genetically modified crops are the
                    only way we can meet the demand, as we run out of arable
                    land. Says that GM crops are not inherently dangerous
                    because "we've been genetically modifying plants and animals
                    for a long time. Long before we called it science, people
                    were selecting the best breeds." </li>
                <li><span class="bold">2009</span> - dies at the age of 95.</li>
                <p id="quote">
                    "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."<br><span id="extra-margin">-- Indian Prime
                        Minister Manmohan Singh </span></p>

            </ul>
            <div class="footer">
                <p>
                    If you have time, you should read more about this incredible
                    human being on his
                    <a href="https://en.wikipedia.org/wiki/Norman_Borlaug"
                        id="tribute-link" target="_blank"
                        rel="noopener noreferrer">Wikipedia
                        entry</a>.
                </p>
            </div>
        </div>
    </main>
</body>

</html>

CSS

body{
    color: #333;
}

main{
    background-color: #eee  ;
    font-family: 'Roboto', sans-serif;  
    margin: 2rem 0 0 0;
    border-radius: 0.3rem;
    width: 100%;
    height: auto;
}

.footer > p{
    text-align: center;
    margin-top: 2rem;
    height: 4rem;
    font-weight: bold;
    font-size: 1.2rem;
}

ul{
    max-width: 550px;
    margin: 3rem auto 0 auto;
}

ul > li{
    margin-bottom: 1rem ;
    line-height: 1.5rem;
    font-size: 1rem;
}

.bold{
    font-weight: bold;
}

#image {
    max-width: 100%;
    height: auto;
    display: block;
}


#img-div{
    background-color: #fff;
    padding: 10px;
    margin: 0;
    text-align: center;
    width: 100%;
}

#header{
    text-align: center;
    margin: 1rem 0;
    padding-top: 1rem;
    
}

#img-caption{
    text-align: center;
    font-weight: 300;
    margin: 1rem auto 0.5rem auto;
}

#tribute-info > h3{
    text-align: center;
    margin: 3rem auto 0 auto;
}

#header > h1{
    font-size: 3rem;
}

#tribute-info{
    text-align: left;
}

#quote{
    line-height: 1.5rem;
    font-style: italic;
    font-size: 1rem;
    font-weight: 300;
}

#extra-margin{
    line-height: 3rem;
}

Hello!

Check the spelling of your CSS link. The bug lies there, everything else is correct.

2 Likes

Thank you that was exactly it

I just misspelled the CSS link, thanks

1 Like