Tribute page img

HTML-CSS
1

img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

I’m getting the above error when testing. Below is my html and css.

Your code so far
img id=“image” src=“static/img/florence.jpg” alt=“Florence Nightingale”

#image {
display: block;
padding: 20px;
max-width: 40%;
height: auto;

}

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

2

please show the live version of your project (like in codepen or repl.it or other) so it is possible to debug

3

Here is the page

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="static/css/style.css">
    <title>Florence Nightingale</title>
  </head>
  <body>
    <div id="main">
        <div id="title">
            <h1>Florence Nightingale</h1>
            <b><p>The founder of professional nursing</p></b>
        </div>

        <div id="img-div">
            
                <img id="image" src="static/img/florence.jpg" alt="Florence Nightingale">
                
                    <div id="img-caption">
                        <p>Picture of Florence Nightingale</p>
                    </div>
        </div>
        <div id="info-box">
            <div id="tribute-info">
                
                <p><b>1820</b> - Born May 12 in Florence, Italy</p>
                <p><b>1837</b> - February 7, records in diary a call to God’s service</p>
                <p><b>1839</b> - Presented to Queen Victoria</p>
                <p><b>1842</b> - Introduced to Richard Monckton Milnes</p>
                <p><b>1843</b> - Decides to work in hospitals</p>
                <p><b>1844</b> - Declines wedding proposal of Milnes</p>
                <p><b>1845</b> - Seeks training at Salisbury Infirmary; parents object</p>
                <p><b>1847</b> - Visits hospitals in Italy and observes Catholic sisters fulfilling nursing duties</p>
                <p><b>1850</b> - Visits Kaiserwerth Institution in Germany</p>
                <p><b>1851</b> - Returns to Kaiserwerth and joins in active nursing duties</p>
                <p><b>1853</b> - Becomes Superintendent of the Institution for the Care of Sick Gentlewomen in Distressed Circumstances</p>
                <p><b>1854</b> - Crimean War begins; appointed Superintendent of the Female Nursing Establishment of the English General Hospitals in Turkey; arrives at Scutari on the Crimean War front</p>
                <p><b>1855</b> - Contracts Crimean Fever and almost dies</p>
                <p><b>1856</b> - Crimean War ends; returns to England; declines wedding proposal of Sir Harry Verney</p>
                <p><b>1859</b> - Publishes Notes on Hospitals and Notes on Nursing</p>
                <p><b>1860</b> - Nightingale Training School is opened</p>
                <p><b>1861</b> - Assists U.S. in organizing soldiers’ hospitals in Civil War</p>
                <p><b>1865</b> - Settles in her Mayfair home in London</p>
                <p><b>1897</b> - Diamond Jubilee of Queen Victoria includes exhibition of Florence Nightingale’s nursing contributions</p>
                <p><b>1907</b> - Awarded the Order of Merit</p>
                <p><b>1910</b> - Dies in sleep August 13</p>
                <br>
                <i><p>This frail young woman ... embraced in her solicitude the sick of three armies.</p>
                <p>— Lucien Baudens</p></i>
            </div>
        </div>
        <br>
        <div>
            <p><b>Feel free to look up more detailed info on <a id="tribute-link" href="https://en.wikipedia.org/wiki/Florence_Nightingale" target="_blank">Florence Nightingale wikipedia page</a></b></p>
        </div>
        <br>
    </div>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  </body>
</html>

Here the css

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5rem;
}

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;    
}

#main {
align-self: center;
align-items: center;
align-content: center;
text-align: center;
margin: 10px;
padding: 10px;
background-color: whitesmoke;
}

#title {
text-align: center;
margin-left: auto;
margin-right: auto;
}

#img-div {
background-color: antiquewhite;
margin: 10px;
padding: 10px;
text-align: center;

}


#image {
display: block;
padding: 20px;
max-width: 40%;
height: auto;

}

#tribute-info {
text-align: left;
max-width: 500px;
padding: 50px;
}

#info-box {
display: flex;
justify-content: center;
}

#tribute-link {
text-align: center;
}

a:link {
  text-decoration: none;
}

Any hint is welcome!

4

you can add a link if formatted also code. Also, please format your code properly if you post that.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

1 Like
5

Also you have to look a the #img-div as well . The CSS for both #image and #img-div ( the parent of #image) will be needed to complete the challenge.

6 
#img-div {
text-align: center;
background-color: antiquewhite;
margin: 10px;
padding: 10px;

}


#image {
display: block;
padding: 20px;
max-width: 40%;
height: auto;

}

text-align: center; in #img-dev and display: block; in #image doesn’t seem to work

edit: Got it, display: block; needs a margin: auto; to work here. Thans for hints.