Building a tribute page

HTML-CSS
1

I would be very appreciative if someone can help me figure out the 3 errors listed below, I can not figure it out, please advise

Thank you

  • Failed: Your img element should have a display of block.
  • Failed: Your #image should have a max-width of 100%.
  • Failed: Your #image should be centered within its parent.
 <figure id="img-div">
    <img
      id="image"
      src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg"
      alt="Dr. Norman Borlaug seen standing in Mexican wheat field with a group of biologists"/>
    <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>

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

#img-div {
  background: white;
  padding: 10px;
  margin: 0;
}

#img-caption {
  margin: 15px 0 5px 0;
}

@media (max-width: 460px) {
  #img-caption {
    font-size: 1.4rem;
  }
}
2

Did you remember to link the style sheet into your HTML?

“Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS”

1 Like
3

One possible explanation for the issues described is the lack of connection between the CSS file and the HTML file. In order for the styles defined in the CSS file to be applied to the elements in the HTML file, a link must be established between the two. This link is established by adding the link tag within the head section of the HTML file, indicating the location and type of the CSS file to be used.

  1. Your img element should have a display of block

This error occurs because you have defined the display property of the img element as “block”. This issue has already been fixed in the styles.css file.

  1. Your #image should have a max-width of 100%

This error occurs because the max-width of the img element is not set to 100%. This issue has already been fixed in the styles.css file.

  1. Your #image should be centered within its parent

This error occurs because the image is not centered within its parent. In order to center an element horizontally within its parent element, you can use the text-align property.

1 Like
5

YOU BOTH ARE GENIUSES!

I was missing the “link rel=“stylesheet” href=“styles.css”>”

School boy error!

Thank you so much!

I’ve only started HTML and CSS coding 3 weeks ago

6

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