Responsive Web Design Projects - Build a Tribute Page

[amreet_meher]

stuck at

1. Your img element should have a display of block.

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

3. Your #image should be centered within its parent.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

HTML:

       <div class="img-container" id="img-div">
          <img
            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg"
            alt="Dr. Norman Borlaug with his mates"
            class="doctor-image"
            id="image"
          >
          <div class="caption" 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.
          </div>
       </div>
CSS:

.img-container{
    margin: 60px;
    padding: 65px;
    background-color:#13151f;
    border-radius: 20px;

}
.doctor-image{
    object-fit: contain;
    border-radius: 10px;
    max-width: 100%;
    display: block;
    height: auto;
    margin: auto;
}
.caption{
    padding-top: 5px;
}

Your browser information:

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

Challenge: Responsive Web Design Projects - Build a Tribute Page

Link to the challenge:

freeCodeCamp.org

[hbar1st]

@amreet_meher

1. Your img element should have a display of block.

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

3. Your #image should be centered within its parent.

to fix these, you need to make sure you have linked your stylehseet and that it contains a selector for #image and a selector for .img that satisfy these requirements.