Tribute Page - Build a Tribute Page

Tell us what’s happening:

I am struggling to get my image to be centered. Some of the advice I have seen suggests that the max-width of the image can only be 50%, but the instructions require 100% (and even when it is written as 100%, it hasn’t passed for being written as that). When I run the tests, it also doesn’t pass for the “img element should have a display of block”. Can anyone direct me on how to fix these issues. Thanks in advance!

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="Corrie ten Boom Tribute page"/>
    <link rel="stylesheet" href="stylesheet.css"/>
  </head>  
  <main id="main">
    <article>
    <h1 id="title">Corrie ten Boom</h1>
    <p>Tramp for the Lord</p>
    <div>
    <figure id="img-div">
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/CorrieTenBoom.jpg" alt="Corrie ten Boom" id="image" class="center" display="block" max-width:"100%"/> 
      <figcaption id="img-caption">Corrie ten Boom</figcaption>  
    </figure>
    </div>
        <p id="tribute-info">
          Corrie ten Boom was a remarkable woman who lived a life in service to others. Best known for her experiences in a labor camp during WWII and her evangelism afterward, her whole life was dedicated to serving others.</p>
          <p>Born in 1892 the fourth child to a watchmaker and his wife in Haarlem, Netherlands, Corrrie learned firsthand the value of service to others. She lived with her parents, three aunts, brother, and sisters in the tiny apartments abover her father's shop. The ten Booms opened their home ot dozens of foster children and were well known supporters in their community. After her sweetheart married another, she chose to live a life dedicated to service. Corrie founded youth clubs, organizations to support the disabled, and girls' clubs.</p>
         <p> At the outbreak of WWII, the ten Boom's worst fears were realized when the country was occupied by Germany. They watched as their Jewish neighbors were targeted by the invaders. The family all became a part in the underground movement. A secret room was added to their home to hide several Jews and Corrie worked to secure ration cards, medical care, and hiding places for others. Unfortunately, an informant betrayed the family and many were taken into custody. Corrie's elderly father passed away shortly after the arrest, but a sister and her brother were released. Betsy and Corrie ultimately ended up at the labor camp Ravensbruck in Germany. Even while living in primitive and dehumanizing conditions, they supported each other and the ladies around them. Betsy developed plans to open a rehabilitation center for those affected by the war. Sadly, she passed away but Corrie was later released. </p>
          <p>Following her release, Corrie continued to support the mentally disabled and opened her home to help those around her in Haarlem. Using her sister's vision, she opened a rehabilitation cneter for the survivors of the concentration camps and later invited those who had collaborated with the enemy during the war. With help, she transformed one of the camps into a shelter for refugees. Corrie later traveled to 60 countries to share her experiences in the camp and her faith. She spoke to people of all walks of life and even visited prisons. Her dozens of books have brought encouragement to many. Especially touching is her choice to forgive those whom abused her, her sister Betsy, and countless others in the camps. In 1967, Israel honored Corrie by naming her Righteous Among the Nations.</p>
         <p> Nearly 30 years following the war, Corrie settled in California. She passed away after suffering multiple strokes, but her words and life's work lives on for us to remember her by, as do the many lives saved by her work.Corrie ten Boom was a truly remarkable woman.
        </p>
    </article>
    <a href="https://en.wikipedia.org/wiki/Corrie_ten_Boom" id="tribute-link" target="_blank">wikipedia</a></div>
  </main>
</html>

/* file: styles.css */

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

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

Please fix this line first.
The correct name of the stylesheet is styles.css

After that, you can try the different ways to center the element like setting display to block and setting the left and right margins to auto.

1 Like

Thank you! Thank you! Thank you! I really appreciate your help. I was wondering what I had done wrong that the css didn’t seem to be properly linked. You have saved me from wasting a lot more time. THANK YOU!

1 Like

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