Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Below is the tribute project I have developed but am required to set #image a max-width of 100%, I have straggled still can’t get

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <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://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" width="100%" max-width="100%"  style="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>
  
  
<h3 id="tribute-info">Here's a time line of Dr. Borlaug's life:</h3>
<a href="tribute-link" id="tribute-link" target="_blank">Tribute link</a>

  </main>

  
</html>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; Infinix X612 Build/QP1A.190711.020; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/100.0.4896.127 Mobile Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

Your max-width is not in your style part of the code here

1 Like
3

So how can I go about this?

4

This

Needs to go in here. Add a semicolon after “block” then add the max-width. Make sure its still in between the quotes.
style="display:block"

1 Like
5

Thanks, problem solved

6

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